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

【问题标题】：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 枚举名称。

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

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>

【讨论】：