淘汰赛双向绑定嵌套数组答案

【问题标题】：Knockout Two-way Bind Nested Array淘汰赛双向绑定嵌套数组
【发布时间】：2013-03-08 09:19:39
【问题描述】：

我在使绑定适用于嵌套数组时遇到了麻烦。页面首次加载时值显示正确，但是当我进行编辑时，绑定的对象不会更新。

我在这里创建了一个 jsfiddle：http://jsfiddle.net/coverbeck/qCzT6/1/。

我的 HTML 是这样的：

<body>
    <ul>
<!-- ko foreach: {data: cities, as: 'city'} -->
        <li>
           <input data-bind="value: city.name"/>
           <span data-bind="text: city.name"></span>
        </li>
    <ul>
    <!-- ko foreach: {data: neighborhoods, as: 'neighborhood'} -->
        <li>
            <input data-bind="value: neighborhood"/>
            <span data-bind="text: neighborhood"></span>
        </li>
    <!-- /ko -->
    </ul>
<!-- /ko -->
</ul>
</body>

我的 JavaScript 是：

var sf = {name: ko.observable('San Francisco'),
          neighborhoods: ko.observableArray([
                ko.observable('Haight'), 
                ko.observable('Bayview'), 
                ko.observable('Marina')
           ])
         }; 
var ny = {name: ko.observable('New York'),
          neighborhoods: ko.observableArray([
                ko.observable('Hells Kitchen'), 
                ko.observable('Times Square')
            ])
          };

var cities = ko.observableArray([sf, ny]);
var viewModel = { cities: cities };
ko.applyBindings(viewModel);

当我修改城市名称时，相应的 span 元素会更新。当我修改社区名称时，对应的 span 元素不会更新。

我已经问过类似的问题here，并且答案有效。我似乎又遇到了同样的问题，除了这次是我看到问题的嵌套数组。我尝试从该答案中针对嵌套数组进行修复，但在这种情况下似乎没有什么不同。

谢谢，

查尔斯

【问题讨论】：

伙计，你的代码格式很糟糕。你能读懂吗？
“Atrocious”似乎有点刺耳，但我更新了格式。

标签： knockout.js

【解决方案1】：

我不确定您的问题到底出在哪里，但可以这样解决：

var ny = {name: ko.observable('New York'), 
          neighborhoods: ko.observableArray([
              new neighborhood('Hells Kitchen'), 
              new neighborhood('Times Square')])};

function neighborhood(name) {
    this.name = ko.observable(name);
}

然后你绑定foreach neighborhoods，然后绑定到name。问题可能是它不喜欢没有名字的 observable？

工作fiddle here

【讨论】：