Question

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

例如在这个Jsbin 中我想修剪所选项目并在结尾处添加三个点，当它显示为选定元素时（已经尝试过CSS，但由于浏览器的不同而放弃了）< / p>

Answer 1

您可以创建一个包含计算的包装器对象来修剪文本：

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')
]);

此外，您需要修改绑定以使用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

knockout.js绑定<select>和<option> </option> </select>的不同文本

1 个答案: