使用 knockout-kendo.js 和breeze.js 时不显示DropDownList 值

Question

我正在使用 Ryan Niemeyer 的 Knockout-Kendo.js 库和微风.js。我遇到了 DropDownList 的问题。我的 DropDownList 定义如下：

<p data-bind= "text: breezeEntityKO().FruitId">  </p> <!--just for debug-->
<input data-bind="kendoDropDownList: { data: selectionOptions, dataValueField: 'FruitId', dataTextField: 'FruitDescription',  value: breezeEntityKO().FruitId}"></input>

这是视图模型

var ViewModel = function() {
this.breezeEntityKO = ko.observable();
//get a breezeEntity. One of the properties on the entity is FruitId
this.breezeEntityKO(breezeEntity); 

breezeEntityKo().FruitId(2) // set Initial selection to orange

this.selectionOptions = ko.observableArray([
    { FruitId: 1, FruitDescription: "apple" },
    { FruitId: 2, FruitDescription: "orange" },
    { FruitId: 3, FruitDescription: "banana" }
]);

this.selectedFruitId = ko.observable(2); // just for debug
};

当我更改 FruitId 的值时，DropDownList 保持空白。正确的值显示在调试文本输出中，并且每次我更改breezeEntityKo().FruitId 的值时都会更改。

breezeEntityKo().FruitId(3) // this changes the value shown on the debug text line but not the drop down list

让 DropDownList 显示正确值的唯一方法是使用淘汰赛“With”绑定。当我使用'with'绑定时，值是这样定义的 - value: $data.FruitId

<div  data-bind="with: breezeEntityKO">
    <input data-bind="kendoDropDownList: { data: selectionOptions, dataValueField: 'FruitId', dataTextField: 'FruitDescription',  value: $data.FruitId}"></input>
</div>

这可以完成工作。下拉列表显示正确的值。每次我更改breezeEntityKo().FruitId 时，DropDownList 都会更新。当我使用下拉列表更改时，微风实体上的 FruitId 属性值正确更改。所以一切都很好。 但是，当我在这种情况下使用淘汰赛 'With' 绑定时，我遇到了一些性能问题，所以如果可能的话，我想找到一个替代方案。

关于如何使用 kendoDropDownList 的任何想法，其中“值”来自微风实体上的属性，而不必将所有内容包装在“With”中？

文档在这里https://rniemeyer.github.io/knockout-kendo/web/DropDownList.html

根据文档中的示例，当“值”只是一个 ko.observable 时没有问题。当我尝试将“价值”定义为轻风实体KO().FruitId 或轻风实体KO.FruitId 时，我只是遇到了问题

编辑 下面的作品没有任何问题，但我需要它来使用breathEntityKO.FruitId而不是selectedFruitId

<input data-bind="kendoDropDownList: { data: selectionOptions, dataValueField: 'FruitId', dataTextField: 'FruitDescription',  value: selectedFruitId}"></input>

Answer 1

下面是一个示例，可以尝试避免重新渲染选项：

this.selectedFruitId = ko.computed(function(){
    return this.breezeEntityKo().FruitId();
}, this);

然后使用编辑中的内容作为标记：

<input data-bind="kendoDropDownList: { data: selectionOptions, dataValueField: 'FruitId', dataTextField: 'FruitDescription',  value: selectedFruitId}"></input>

这是问题编辑之前的上一个答案：

没有使用过击倒剑道，但通常我发现with 绑定是最好和最有效的方法。作为替代方案，您应该能够执行以下操作：

<input data-bind="kendoDropDownList: { data: breezeEntityKO().selectionOptions, dataValueField: 'FruitId', dataTextField: 'FruitDescription',  value: breezeEntityKO().FruitId}"/>

另外，请注意：您不需要在 with 绑定中使用 $data，除非您确实需要整个对象：范围暗示您在 with 绑定中使用的项目的上下文。所以上面你可以说：value: FruitId