Question

我想弄清楚淘汰赛中的订阅功能如何运作，我希望有人可以帮助我。我基本上试图从数组中取出选定的值，并使用subscribe()

将其绑定到span元素

我希望通过使用选择器或其他事件而不涉及ui的意识来做到这一点。根据我从文档中读到的内容，订阅者应该在选择项目时更新值。我在这里遗漏了一些东西，因为我无法将任何内容绑定到span标记。

我很感激我对失踪的评论。

感谢

下面的代码和小提琴 Fiddle Link

JS

var myProduceModel = function(){
 var self = this;


    self.produceList = ko.observableArray([
        {productName: "Apples", productCode: "#FF0000"},
        {productName: "Oranges", productCode: "#FF9200"},
        {productName: "Grapes", productCode: "#652C90"},
        {productName: "Figs", productCode: "#67070D"}    
        ]);

    self.selectedItem = ko.observable();
    self.selectedField = ko.observable();

    self.selectedItem.subscribe(function(item){
        self.selectedField(item.productName);
        return item.productCode;
    });
};

    ko.applyBindings(new myProduceModel());

HTM

<select data-bind="options: produceList, optionsText:'productName', optionsvalue: 'selectedItem', optionsCaption: 'Choose...'"></select>

<hr/>
<span data-bind="text: selectedItem().productCode"></span>

Answer 1

您滥用selectedValue选项，该选项用于指示您的对象的哪个属性用作所选值。

要设置所选值本身，您需要使用value绑定。

所以将绑定更改为：

<select data-bind="options: produceList, 
                   optionsText:'productName', 
                   optionsCaption: 'Choose...',
                   value: selectedItem"></select>

演示JSFIddle。

如果没有选择任何内容，data-bind="text: selectedItem().productCode"将失败，你的小提琴中还有一个问题。所以你需要类似的东西 data-bind="text: selectedItem() && selectedItem().productCode"或使用with绑定。

使用subscribe函数将选定值从下拉列表绑定到span元素

1 个答案: