敲除绑定文本框以选择文本

Posted 2023-03-27

【中文标题】敲除绑定文本框以选择文本

【英文标题】：Knockout bind textbox to select text

【发布时间】：2017-02-09 10:53:55

【问题描述】：

最近我开始学习前端开发，所以如果这个问题太愚蠢，请不要感到惊讶。 我想要做的是绑定文本框来选择文本，而不是它的 id。这是一个 jsfiddle：https://jsfiddle.net/1rtzfLr1/.

这是我的 html：

<div data-bind="foreach: objects()">
  <input type="text" data-bind="value: type" />  
  <button type="button" data-bind="click: $parent.removeObject">-</button>
</div>
<div>
  <select data-bind="options: types, optionsValue: 'id', optionsText: 'title', optionsCaption: 'Type...', value: itemToAdd().type"></select>  
  <button id="create-object-button" type="button" data-bind="click: addObject">+</button>
</div>

还有 JS：

function model() 
  var self = this;

  self.objects = ko.observableArray();
  self.types = ko.observableArray([new Type(1, 'one'), new Type(2, 'two'), new Type(3, 'three')]);
  self.itemToAdd = ko.observable(new Object());

  self.addObject = function() 
    self.objects.push(self.itemToAdd());
    self.itemToAdd(new Object());
  ;

  self.removeObject = function(object) 
    self.objects.remove(object);
  ;

  function Object(type) 
    var self = this;
    self.type = type;
  

  function Type(id, title) 
    var self = this;
    self.id = id;
    self.title = title;
  
;

ko.applyBindings(new model());

问题是我想在文本框中显示two 而不是2，但同时这是应该提交的表单的一部分，在提交表单时我想提交@ 987654326@ 值，在实际应用中它是 java 枚举名称。

谢谢，如果问题太混乱，请见谅。

【参考方案1】：

很抱歉，你不知道你在追求什么，但也许是这样的？http://jsfiddle.net/LkqTU/31963/

js

function type(id, title) 
  var self = this;
  self.id = ko.observable(id);
  self.title = ko.observable(title);
;

var initialArray = [
  new type(1, 'one'),
  new type(2, 'two'),
  new type(3, 'three')
]


function model() 
  var self = this;

  self.types = ko.observableArray(initialArray);
  self.options = ko.observableArray(initialArray);
  self.selectedtype = ko.observable('');
  self.removeObject = function(p) 
    self.types.remove(p);
  
  self.addObject = function() 
    self.types.push(new type(
      self.selectedtype().id(),
      self.selectedtype().title()));
  


var mymodel = new model();

$(document).ready(function() 
  ko.applyBindings(mymodel);
);

html

<div data-bind="foreach: types">
  <p>
    <span data-bind="text: id"></span>:
    <input type="text" data-bind="value: title" />
    <button data-bind="click: $parent.removeObject">
  </p>

  -
  </button>

</div>
<br/>
<select data-bind="options: options,
                       optionsText: 'title',
                       value: selectedtype,
                       optionsCaption: 'Choose...'"></select>
<button data-bind="click: addObject">+</button>

</button>