Question

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>应分别显示“阿姆斯特丹”和“音乐厅”，但仅限于

现在，当我通过表单本身和Add按钮添加一个新Place时，我单击表中刚刚创建的Place的Edit链接，其所有属性确实已设置并显示在表单中，包括城市和地方类型。

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

我错过了什么？

Answer 1

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

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

我updated your example显示如何使用optionsValue，同时仅存储城市的id和地方类型{/ 1}}。

Answer 2

您应该使用with绑定进行编辑和特定记录。看看这里的答案：

Edit item in knockout observableArray

Knockout.js：将对象绑定为<select> / dropdown </select>中的值

2 个答案: