【问题标题】:KnockoutJS Select Options and Selected ValueKnockoutJS 选择选项和选择的值
【发布时间】:2012-05-19 13:04:53
【问题描述】:

类似问题:Select element's initial value

我在设置选择元素的初始值时遇到问题。我基本上有一个来自服务器的种子数据列表来填充下拉列表,我希望所选值代表应该从实体中选择的内容。

因为数据模型的选择值不等于种子数据中的对象引用,所以没有选择任何内容。

现在,我正在遍历每个实体,找到正确的选定值,将其设置为等于种子数据的等效值,然后 Knockout 知道如何连接它。

还有比这更优雅的解决方案吗?我用更多细节摆弄了一个简化的例子......http://jsfiddle.net/hbrYM/14/

【问题讨论】:

    标签: knockout.js


    【解决方案1】:

    正如您正确猜测的那样, selectedValue 引用不匹配,因此 KO 没有选择该项目。实现这一点的方法是不要将复杂对象保存在所选值中,而是选择 ID,因为原始类型相等可以成功并选择正确的值。

    http://jsfiddle.net/VLTFB/3/

    您需要在选项绑定上使用 optionsValue 选项(如果有意义的话:)

    <select data-bind="options: seedData,
                        optionsText: 'firstName',
                        optionsValue: 'ID',
                        value: data.selectedValue">
    

    编辑

    如上所述,您可以使用计算(未经测试)重新选择正确的项目。

    vm.currentlySelected = ko.computed(function () { 
       for (var i = 0; i < this.seedData().length; i += 1) {
           var data = this.seedData()[i];
           if (data.ID === this.selectedValue()) {
               return data;
           }
       }
       return null;
    }, vm);
    

    希望这会有所帮助。

    【讨论】:

    • 感谢回复,有道理。我目前发回的对象(不仅仅是 ID)然后被反序列化和持久化。我真的希望有一种方法可以“指导” KO 如何连接它,因为我在这个特定的 UI 中有很多不同的选择......
    • 当来自服务器的选择数据进来时,您仍然可以很容易地发送回对象,只需发送 id。当您需要发送新的选定对象时,只需编写一个计算来检索当前选定的对象(参见编辑)。这样做实际上更精简,你已经有了种子数据,所以为什么还要麻烦再次发送所有额外的信息。
    • 对我来说似乎是一个错误...您希望 value 绑定应该与 optionsValue 键匹配,而不是需要整个对象。如果只保存某个键,则只匹配某个键。
    • ko 选择绑定确实缺少某种“对象引用管理”。有时我们希望将 optionValue 设置为特定属性,以便可以自然地将其发送回服务器(例如使用 form.submit() 无需修改),但仍然能够处理当前选择的对象以进行 javascript 工作它,目前用 KO 无法完成。
    • 如果不清楚,optionsValue 需要是一个数字。如果您尝试将其设置为字符串值,它将不会绑定并且您将拥有一个空值属性。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-12
    • 2020-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多