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"
        }
    ]
}

我像这样绑定每个元素：

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

当用户点击某张卡片时，我想将所选卡片显示在不同的div（ foreach 之外）中，并在所选的json对象中显示更多属性

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

我正在尝试类似的东西（但没有获得任何数据）：

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

Answer 1

您需要通过跟踪包含卡片的ViewModel上的所选卡片来完成此操作。 Here is a fiddle简单地证明了这一点。这是修改后的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”功能。由于observables 是函数，我们可以跳过该步骤（除非你需要在show函数中做更多的事情）。

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

1 个答案: