knockout.js - knockout 绑定(bind)到 Select optionsText 以获取 fullName

Question

问题是关于 optionsText 绑定(bind)以获取 fullName。

JsFiddle

当我这样做时，它有效 as in Knockout doc ,

<select multiple="multiple" width="50" data-bind="options: leftItems,optionsText: function(item) {return item.firstName() + ' ' + item.lastName() }, selectedOptions:leftSelectedItems"></select>

但是当我将函数移至 View 模型并尝试使用它时不起作用，

这是我的选择，

<select multiple="multiple" width="50" data-bind="options: leftItems,optionsText: returnFullName(item), selectedOptions:leftSelectedItems"></select>

在我的 View 模型中，

    self.returnFullName = function(item) {
        console.log("self.returnFullName called.");
        console.log(item);
        return item.firstName() + ' ' + item.lastName();
    };

我收到的错误是“Uncaught ReferenceError:无法处理绑定(bind)“options: function (){return leftItems }”，这甚至与 optionText 无关。

我错过了什么吗？

Answer 1

您不需要像现在这样传递它。但您可以遵循这些方法中的任何一种。

• 方法1

您可以只调用 viewmodel 函数，第一个参数将隐式具有 $data 参数。

<select multiple="multiple" width="150" data-bind="options: names,optionsText: returnFullName"></select>

在虚拟机中

 self.returnFullName = function(item) {
     console.log(item);
        return item.firstName + " " + item.lastName;

    }; 

Jsfiddle:-

http://jsfiddle.net/mtfv6q6a/10/

• 方法2

绑定(bind) $data 并像您一样传递它。

<select multiple="multiple" width="150" data-bind="options: names,optionsText:returnFullName.bind($data);"></select>

Jsfiddle:-

http://jsfiddle.net/mtfv6q6a/42/

• 方法 3:-

您可以将其包装在函数调用中并像这样调用:-

<select multiple="multiple" width="150" data-bind="options: names,optionsText:function(data){ return returnFullName(data);}"></select>

Jsfiddle:-

http://jsfiddle.net/mtfv6q6a/51/