在knockout.js中设置组合的optionsText

时间:2014-01-27 18:00:02

标签: javascript knockout.js

我想在我的optionsText字段中组合两个返回值,我认为这很简单,但我显然是错的。我还使用了普通视图模型之外的选项字段的值。这是原始的:

<select style="width: 180px" data-bind="visible: false, value: fields.person, options: $root.extra.personList, optionsText: 'FirstName', optionsValue: 'LastName' }, select2: {}">

这很好用,显示人的FirstName并将值设置为LastName。

下一篇文章会引发错误:

<select style="width: 180px" data-bind="visible: false, value: fields.person, options: $root.extra.personList, optionsText: function (item) { return item.FirstName() + '-' + item.LastName() }, optionsValue: 'LastName', select2: {}">

未捕获的TypeError:对象#的属性'FirstName'不是函数

2 个答案:

答案 0 :(得分:15)

您确定FirstName和LastName是可观察的吗?如果你不确定,试试这个:

optionsText: function(item) { return ko.unwrap(item.FirstName) + '-' + ko.unwrap(item.LastName); }

或者更好的是,在viewmodel中创建一个computed:

self.FullName = function() {
    return ko.unwrap(self.FirstName) + '-' + ko.unwrap(self.LastName);
};

optionsText: 'FullName'

答案 1 :(得分:0)

optionsText的工作原理是它在绑定的options数组上查找属性“FirstName”。因此,如果您的额外人员数组具有'FirstName'和'LastName',您可以扩展计算属性以保存全名。

function ViewModel(){
    var self = this; 
    self.peopleList = ko.observableArray(); 
}
function Person(f, l){
    var self = this; 
    self.FirstName = ko.obserable(f); 
    self.LastName = ko.obserable(l); 
    self.FullName = ko.computed(function(){
        return self.FirstName() + ' ' + self.LastName();
    });
}

如果它们不是可观察的,你不想在它们中调用它们[what()的确如此),在这种情况下,我只会在视图模型上有一个函数,它将它们放在一起,你可以从绑定中调用它们。