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

Posted 2023-03-27

【中文标题】使用 knockout-kendo.js 和breeze.js 时不显示DropDownList 值

【英文标题】：DropDownList Value not displayed when using knockout-kendo.js and breeze.js

【发布时间】：2016-03-27 16:21:17

【问题描述】：

我正在使用 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>

【参考方案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

【讨论】：

感谢您的回复。我用一些额外的细节更新了我的问题。当我尝试轻风实体KO（）.FruitId或轻风实体KO.FruitId时，selectionOptions被正确拾取，它的“值”没有被设置。我试图避免使用“With”的原因是，每次我在微风实体 Ko() 中更改实体时，都不会重新呈现所有 selectionOptions。我有一个包含大约 50 个下拉菜单的表单，有些有几百个可用选项。

对于每个 50ish 下拉菜单，选择的选项是静态的吗？如果是这样，我会说在父对象上定义它们，并且使用 with 您可以使用 $parent 绑定来引用它们。即data: $parent.selectionOptions。

是的，它们对于每个下拉菜单都是静态的。即使我使用 data: $parent.selectionOptions 这仍然不会位于 data-bind="with:breathEntityKO" 的范围内吗？如果对breathEntityKO 进行更改，这是否会重新渲染包括$parent.selectionOptions 在内的所有内容？我想要实现的是，当我更改breezeEntityKO 中的实体时，它只会更改下拉列表的值，并且不会重新呈现所有 selectionOptions。

它可能会重新渲染，如果不进行测试就不能确定。我更新了我的答案以反映更新的信息。看看这是否有帮助 = )