访问knockout.js中多维数组中的特定项

Accessing a specific item in a multidimensional array in knockout.js

本文关键字：数组 knockout js 访问      更新时间：2023-09-26

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

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和城市名称，但我只想列出的城市名称

您可以在绑定中使用数组索引器，因此您可以使用$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

相关文章：