Question

我正在使用淘汰赛开发一个简单的网页。考虑我有以下ViewModel函数

self.sample_data = ko.observableArray([
  {
  1:[
        { title1:"abc", title2:"def"},
        { title1:"abc", title2:"def"}
    ],
  2:[
        { title1:"ghi", title2:"jkl"},
    ]
   }
]);

能够将特定的json值与键值绑定为视图层的“1”，如下所示。

<h1 data-bind="text:sample_data[0].1[0].title1"></h1>

考虑我有两个按钮'previous'和'next'。在单击“next”按钮时，我应该将与密钥值相关联的数据作为JSON中的“2”绑定到相同的h1标记。我们怎样才能实现这一目标？

Answer 1

您的Json对象包含无效密钥：

JSON only allows key names to be strings

这是绑定样本

HTML

<h1 data-bind="text: sample_data()[0][2][0].title1"></h1>

的JavaScript

var self = {};
self.sample_data = ko.observableArray([
  {
  "1":[
        { title1:"abc11", title2:"def11"},
        { title1:"abc12", title2:"def12"}
    ],
  "2":[
        { title1:"ghi21", title2:"jkl21"},
    ]
   }]);  

ko.applyBindings(self);

您可以使用代码here

Answer 2

您需要在视图模型中使用可观察的索引变量。单击下一个按钮将增加该变量：

var self = {};
self.sample_data = ko.observableArray([
    {
        "1": [
            { title1: "abc11", title2: "def11" },
            { title1: "abc12", title2: "def12" }
        ],
        "2": [
            { title1: "ghi21", title2: "jkl21" }
        ]
    }
]);
self.index = ko.observable(1);
self.goToNext = function() {
    self.index(self.index() + 1);
};

然后，您的数据绑定可能如下所示：

<h1 data-bind="text: sample_data()[0][index()][0].title1"></h1>
<a data-bind="click: goToNext">Next</a>

使用knockout在视图层迭代JSON

2 个答案: