与Knockout绑定

时间:2012-09-27 16:06:39

标签: javascript knockout.js

所以我遇到了这个问题,数据没有显示在表格中。

我的视图模型:

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]

谢谢!

3 个答案:

答案 0 :(得分:12)

您有一个拼写错误:data-bibd应为data-bind。其余seems没问题。

答案 1 :(得分:1)

当然有拼写旋转箭头指的是。您的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());

你可以看到它working in JSFiddle here.

答案 2 :(得分:0)

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

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