在 knockout.js 中设置组合选项文本答案

【问题标题】：Setting a combined optionsText in knockout.js在 knockout.js 中设置组合选项文本
【发布时间】：2014-02-18 17:23:43
【问题描述】：

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

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

这很好用，显示人的名字并将值设置为姓氏。

下一段会抛出错误：

<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: {}">

未捕获的类型错误：对象# 的属性“FirstName”不是函数

【问题讨论】：

你确定FirstName 和LastName 是可观察的吗？如果你不确定，试试这个：ko.unwrap(item.FirstName) + '-' + ko.unwrap(item.LastName)
我不确定，我会试试看。
在开始将其添加到视图中之前，请考虑将该函数移动到视图模型中并调用它。它将导致更多更简洁的代码。
@JeffMercado 这个，把它改成ko.computed。
谢谢 sroes，我没有管理以前的模型，所以我不知道它们是不可观察的。你能回答我吗？

标签： javascript knockout.js

【解决方案1】：

您确定 FirstName 和 LastName 是可观察的吗？如果你不确定，试试这个：

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

或者更好的是，在您的视图模型中创建一个计算：

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

还有：

optionsText: 'FullName'

【讨论】：

@ChrisNevill 我知道您的评论已有 4 个月了，但作为对其他人的说明，FullName 必须是选项的成员，而不是视图模型的成员。 jsfiddle.net/a1mjnczL/3
感谢 Silvermind。我想我最终一定想出了一个解决方案，但忘了回到这里。

【解决方案2】：

optionsText 的工作原理是在绑定到的选项数组上查找属性“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 () 的作用]，在这种情况下，我只会有一个生活在视图模型上的函数，它将它们放在一起，您可以从绑定中调用它们。

【讨论】：