1

次の JSON データがあります。

var donutData = [ {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"topping":
    [
        { "id": "5001", "type": "None", "price": 45.00 },
        { "id": "5002", "type": "Glazed", "price": 45.00 },
        { "id": "5005", "type": "Sugar", "price": 45.00 },
        { "id": "5007", "type": "Powdered Sugar", "price": 45.00 },
        { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00 },
        { "id": "5003", "type": "Chocolate", "price": 45.00 },
        { "id": "5004", "type": "Maple", "price": 45.00 }
    ]
   },
    { "id": "0002",
        "type": "donut",
        "name": "Lava Cake",
        "ppu": 0.65,
        "topping":
    [
        { "id": "5001", "type": "None", "price": 45.00 },
        { "id": "5002", "type": "Glazed", "price": 45.00 },
        { "id": "5005", "type": "Sugar", "price": 45.00 },
        { "id": "5007", "type": "Powdered Sugar", "price": 45.00 },
        { "id": "5006", "type": "Chocolate with Sprinkles", "price": 45.00                           },
        { "id": "5003", "type": "Chocolate", "price": 45.00 },
        { "id": "5004", "type": "Maple", "price": 45.00 }
    ]
    }

]

以下を使用して、これを HTML ページに簡単にデータバインドできます。

var DonutViewModel = function(){
donuts = ko.observableArray();

}

$(document).ready(function () {
    ko.applyBindings(DonutViewModel(donutData));
});

そして、ここに私のHTMLがあります:

 <tbody data-bind="foreach:donuts">
<tr>
    <td data-bind="text:id"></td>
    <td data-bind="text:type"></td>
    <td data-bind="text:name"></td>
    <td data-bind="text:ppu"></td>
    <td>
        <table>
            <tbody data-bind="foreach:topping">
                <tr>
                    <td data-bind="text:type"></td>
                </tr>
            </tbody>
        </table>
    </td>
     <td>
        <table>
            <tbody data-bind="foreach:topping">
                <tr>
                    <td data-bind="text:price"></td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>

今、ノックアウト マッピング プラグインを使用して同じことを達成したいと考えています。私は次のことを試しました：

$(document).ready(function () {
var viewModel = ko.mapping.fromJS(donutData);
ko.applyBindings(viewModel());
//ko.applyBindings(DonutViewModel(donutData));
});

これによりエラーが発生します-明らかに、ビューモデルにはもう存在しない data-bind="foreach:donuts" を使用したためです。では、UI やデータを変更してこれを機能させるにはどうすればよいでしょうか?

また、マッピング プラグインを使用する場合、ドーナツ データに新しいオブジェクトを追加したい場合、どうすればよいですか?

4

1 に答える 1

0

マッピング プラグインを呼び出した後、viewModel にあるプロパティを確認してください。json を見ると、donuts というプロパティがありません。最初にビューモデルを作成してから、マッピング プラグインを使用して更新する必要があります。

var viewModel = DonutViewModel();
viewModel.donuts = ko.mapping.fromJS(donutData);

新しいドーナツを配列に追加するには、push を使用します。

viewModel.donuts.push(/*js representation of a donut*/);
于 2013-06-05T12:44:04.697 に答える