使用knockout.js绑定到foreach绑定的选定项目

Question

我使用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"
        }
    ]
}

我像这样绑定每个elemet:

 <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之外)中

我应该从视图模型绑定到一张选定的卡？

我正在尝试类似的东西(但没有得到任何数据):

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

Answer 1

您需要通过跟踪保存卡的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"功能.由于observable 是函数,我们可以跳过这一步(当然除非你需要在show函数中做更多).