javascript - knockout.js 为 <select> 和 <option> 绑定(bind)不同的文本

Question

是否有可能以某种方式将我的选择(出现在元素中的文本)与我的选项文本分开，以便我可以 trim 它并以更好看的方式返回。

例如在这个Jsbin 我想 trim 选中的元素并在它显示为选中元素时在末尾添加三个点(已经尝试使用 CSS 但由于浏览器差异我放弃了)

Answer 1

您可以使用 computed 创建一个包装器对象来 trim 您的文本:

var ItemModel = function(value){
  var self = this;

  self.value = ko.observable(value);
  self.text = ko.computed(function(){
    val = self.value();
    if (val.length > 15){
      return val.substring(0, 15) + "...";
    }
    return val;
  });
};

添加使用它而不是普通的 js 对象:

self.listOptions = ko.observableArray([
    new ItemModel('Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci'),
    new ItemModel('Neque porro quisquam est qui dolorem ipsum'),
    new ItemModel('Proin ultrices, tellus id placerat congue, neque justo commodo purus, et pulvinar massa')
]);

您还需要修改您的绑定(bind)，以便为 value 和 text 使用不同的属性:

<select data-bind="foreach: listOptions, value: selectedValue, attr: {title : selectedValue}" >
  <option data-bind="text: text, value: value"></option>
</select>

这是工作的jsbin: http://jsbin.com/oFIdAXO/3/edit