Knockout.js：将对象绑定为 <select> / 下拉列表中的值答案

【问题标题】：Knockout.js: Binding an object as a value in <select> / dropdownKnockout.js：将对象绑定为 <select> / 下拉列表中的值
【发布时间】：2013-03-13 17:01:16
【问题描述】：

参考这个小提琴：http://jsfiddle.net/44AwW/3/

3 秒后，一个新的“地点”被添加到 <table>（作为模拟 ajax 加载数据的一种方式）。

'Place' 是一个简单的 JS 对象，但它的两个属性（City 和 PlaceType）本身就是对象 - 每个都有一个 'id' 和 'name' 属性。

var Place = {
    id: 1,
    name: "Paradiso",
    placeType: {
        id: 1,
        name: "Concert Hall"
    },
    city: {
        id: 1,
        name: "Amsterdam"
    },
    address: "Somewhere in the city"
}

单击“编辑”选项时，网格中“地点”的值应设置为以下形式：城市和地点类型<select>s 应分别显示“阿姆斯特丹”和“音乐厅”，但只有 '显示/设置名称'和'地址'。

现在，当我通过表单本身和“添加”按钮添加新地点时，单击表格中刚刚创建的地点的“编辑”链接，它的所有属性确实已设置并显示在表单中，包括City 和 PlaceType。

因此，通过表单创建并添加到 observableArray（因此显示在 <table> 上）的 Places 的所有属性值在使用 Edit 按钮时正确显示，但是当 Places 以编程方式添加时（如小提琴中所示） ) 或通过 ajax，City 和 PlaceType 属性无法设置并显示在表单上。

我错过了什么？

【问题讨论】：

标签： knockout.js

【解决方案1】：

Javascript 通过引用比较对象。看起来相同的对象不会相互匹配。当您从选择列表中选择时，您将获得对存储在cities 或placeTypes 中的对象的引用。但是当你通过 ajax 加载一个对象时，你会得到一个看起来一样的新对象。

有两种方法可以解决这个问题。第一种是使用字符串进行匹配。在这种情况下，您将添加一个optionsValue 绑定到您的select 元素。第二种是单独查找对象（使用 ko.utils.arrayFirst 之类的东西）并在编辑之前将其存储。

我updated your example 展示如何使用optionsValue，同时仅将城市的ids 和位置类型存储在place 对象中。

【讨论】：

你是正确的。老实说，我认为对象不匹配只是“看起来一样”，但我只是认为 KO 足以让它工作：P - 无论如何，我已经在考虑使用查找功能查找对象。我尝试了optionsValue，但无法成功 - 您能否就该方法提供任何其他帮助？
我添加了一个使用optionsValue的例子。

【解决方案2】：

您应该使用with 绑定来编辑和特定记录。在这里查看答案：

Edit item in knockout observableArray

【讨论】：

感谢您的快速回答。但是，在您提供的代码中，没有将 <select> 与对象（而不是字符串）作为值的示例。无论如何，我将尝试使用 with 绑定，并会通知您。