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

もちろん、pinpinarrow が指すタイプミスがあります。また、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 here で動作しているのを見ることができます。

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 に配置されます。