在 knockout.js 中访问多维数组中的特定项目答案

【问题标题】：Accessing a specific item in a multidimensional array in knockout.js在 knockout.js 中访问多维数组中的特定项目
【发布时间】：2015-11-21 14:34:07
【问题描述】：

我试图弄清楚如何在多维数组中获取嵌套数组的 0 索引。我正在使用将州和城市列出到<ul> 的foreach 绑定。我当前的代码是：

http://codepen.io/ntibbs/pen/vNMKzg?editors=101

<ul id='list' data-bind="foreach: states">
<li>
    <div>Surf locations in
        <span data-bind="text: name"> </span>:
    </div>
    <ul data-bind="foreach: city">
        <li>
            <span data-bind="text: $data"> </span>
        </li>
    </ul>
</li>
</ul>


var state = function(name, city) {
    this.name = name;
    this.city = ko.observableArray(city);
}
var viewModel = {
    states: [
        new state("Virginia", [["Va Beach",[36.852926, -75.977985]], ["Chincoteague Island",[37.933179, -75.378809]]]),
        new state("Maryland", [["Atlantic City",[39.364283, -74.422927]], ["Ocean city",[38.336503, -75.084906]]]),
        new state("North Carolina", [["Oakacroke",[35.114615, -75.98101]], ["Nags Head",[35.957392, -75.624062]],["Emerald Isle",[34.677940, -76.950776]]])
        ]
};

ko.applyBindings(viewModel);

我当前的代码显示 lon、lat 和城市名称，但我只想列出城市名称

【问题讨论】：

标签： javascript multidimensional-array knockout.js

【解决方案1】：

您可以在绑定中使用数组索引器，因此您可以使用$data[0] 访问第一个索引：

 <ul data-bind="foreach: city">
     <li>
         <span data-bind="text: $data[0]"> </span>
     </li>
 </ul>

工作CodePen

更面向视图模型的方法是创建一个适当的“城市”对象，该对象具有name 属性：

var City = function(data) {
  this.name = data[0];
  this.coords = data[1];
}

并在创建state 时使用此City：

var state = function(name, city) {
    this.name = name;
    this.city = ko.observableArray(city.map(function(c){ return new City(c)}));
}

您的绑定可能如下所示：

<ul data-bind="foreach: city">
    <li>
        <span data-bind="text: name"> </span>
    </li>
 </ul>

示例CodePen

【讨论】：

哇。我会发誓我已经试过了。它有效，谢谢。我会尽快接受你的回答。