当我想显示模型的数组结果以查看时，jsfiddle 没有显示任何输出？

Question

这是 js fiddle: fiddle link

var CITIES = ko.observableArray([]);
ko.applyBindings(CITIES, document.getElementById("popupCityList"));
var arr = [];
arr.push({ "cityname": "Mumbai", "cityid": 1 });

我正在将对象推送到可观察数组。但我看不到任何结果。我对淘汰赛很陌生。谁能帮我解决这个问题？

Answer 1

这里有一些问题：

Javascript 区分大小写：当您的属性被命名为 cityname 时，您无法使用 CityName
您的视图模型是一个可观察数组，它没有 CITIES 属性。使用 $data (foreach: $data) 引用视图模型中的数据，或者将数组包装在对象中 (ko.applyBindings({CITIES: CITIES}))
你不应该在没有前缀 data-

更正版本：

var CITIES = ko.observableArray([]);

var viewmodel = {
  CITIES: CITIES
};

ko.applyBindings(viewmodel, document.getElementById("popupCityList"));

var arr = [];

arr.push({
  "cityname": "Mumbai",
  "cityid": 1
});

CITIES(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <ul id="popupCityList" data-bind="foreach: CITIES">
    <li data-bind="text: cityname"></li>
  </ul>
</div>

补充说明：

您可以直接推送到可观察数组。即：您不需要 arr 但可以写 viewmodel.CITIES.push({ /* ... */ })
最好遵循一些关于变量名大小写的代码约定。

Answer 2

var CITIES = ko.observableArray([]);
// You are giving the wrong element
ko.applyBindings(CITIES, document.getElementById("popupCityList")[0]);
var arr = [];
CITIES.push({ "cityname": "Mumbai", "cityid": 1 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>

<select id="popupCityList" data-bind="options: CITIES,
                                      optionsText: 'cityname',
                                      value: 'cityid',
                                      optionsCaption: 'Choose...'"></select>

当我想显示模型的数组结果以查看时，jsfiddle 没有显示任何输出？

jsfiddle not showing any output when i want to show array results from model to view?

jsfiddle

knockout.js