2

私はknockout.jsとko.mappingプラグインを使用して、jsonオブジェクトのリストをhtmlグリッドにバインドしています。各アイテムをカードと呼びましょう（以下の簡略化された例）

{
    "card": [
        {
            "Id": "cards/1",
            "category": "Demo",
            "title": "Card 1",
            "description": "bla bla",
            "picture": "demo1.jpg ",
            "madeBy": "user/1"
        },
        {
            "Id": "cards/2",
            "category": "Demo",
            "title": "Card 2",
            "description": "bla bla",
            "picture": "demo2.jpg",
            "madeBy": "user/2"
        }
    ]
}

私は次のように各要素をバインドします：

 <div data-bind="foreach: card">
    <span data-bind="text:title"></span>
    <a data-bind='click: show'><img data-bind="attr:{src: picture}" /></a>
</div>

ユーザーがカードをクリックすると、選択したjsonオブジェクトのいくつかのプロパティを使用して、選択したカードを別のdiv（ foreachの外）に表示したいと思います。

ビューモデルから選択した1枚のカードに誰をバインドしますか？

私は次のようなことを試みています（しかしデータを取得していません）：

<h1 data-bind="text: $data.title"> </h1>
4

1 に答える 1

7

これを行うには、カードを保持しているViewModelで選択したカードを追跡します。これを簡単に示すフィドルがあります。変更されたHTMLとJSは次のとおりです（これはデモの目的で簡略化されており、マッピングは使用していませんが、アイデアは得られます）。

HTML：

<div data-bind="foreach: cards">
    <span data-bind="text:title"></span>
    <a data-bind='click: $parent.selectedCard'>ImagePlaceholder</a>
    </br>
</div>

<div data-bind="with: selectedCard">
    <h1 data-bind="text: title"></h1>
    <span data-bind="text: description"></span>
</div>

JS

var ViewModel = function(cards) {
    this.cards = ko.observableArray(
        ko.utils.arrayMap(cards, function(c) {return new Card(c);})
    );
    this.selectedCard = ko.observable();
};

clickラッパーの「表示」機能を使用せずに、選択したカードを直接設定することに注意してください。オブザーバブルは関数であるため、そのステップをスキップできます（もちろん、show関数でさらに実行する必要がある場合を除きます）。

于 2012-07-15T22:31:08.933 に答える