javascript - 与淘汰赛绑定

Question

所以我有这个问题，数据没有显示在表格中。

我的视图模型：

var my = {};
my.viewModel = {
    Person: ko.observableArray([
        { name: "Alireza", family: "Davoodi", city: "Tehran", date: new Date().getTime() },
        { name: "Alireza", family: "Davoodi", city: "Tehran", date: new Date().getTime() },
        { name: "Alireza", family: "Davoodi", city: "Tehran", date: new Date().getTime() },
        { name: "Alireza", family: "Davoodi", city: "Tehran", date: new Date().getTime() },
        { name: "Alireza", family: "Davoodi", city: "Tehran", date: new Date().getTime() },
    ])
};

ko.applyBindings(my.viewModel);

看法：

<tbody data-bind="foreach: Person" >
    <tr>
        <td data-bibd="text: name"></td>
        <td data-bibd="text: family"></td>
        <td data-bibd="text: city"></td>
        <td data-bibd="text: date"></td>
    </tr>
</tbody>

数据未列于表中；我哪里错了？

我得到的输出是：[object,object]

谢谢！

Answer 1

你有一个错字：data-bibd应该是data-bind. 其余的似乎都很好。

Answer 2

当然有spinningarrow指的错字。您的 JSON 格式也有一个小问题（最后一行中的逗号）。

另外，我相信更好的实现（保留面向对象的淘汰方法）是这样的：

var my = {};
my.viewModel = function () {
    this.Person = ko.observableArray([{
        name: "Alireza",
        family: "Davoodi",
        city: "Tehran",
        date: new Date().getTime()
    }, {
        name: "Alireza",
        family: "Davoodi",
        city: "Tehran",
        date: new Date().getTime()
    }, {
        name: "Alireza",
        family: "Davoodi",
        city: "Tehran",
        date: new Date().getTime()
    }, {
        name: "Alireza",
        family: "Davoodi",
        city: "Tehran",
        date: new Date().getTime()
    }, {
        name: "Alireza",
        family: "Davoodi",
        city: "Tehran",
        date: new Date().getTime()
    } ]);
};

ko.applyBindings(new my.viewModel());

你可以在这里看到它在 JSFiddle 中工作。

Answer 3

 Person: ko.observableArray([
        { name: ko.observable("Alireza"), family: ko.observable("Davoodi"), city:ko.observable("Tehran"), date:ko.observable(new Date().getTime()) },   ])

所有 json 值都放在 ko.observable 上。