绑定到与foreout绑定的选定项目knockout.js

我正在使用knockout.js和ko.mapping插件将json对象列表绑定到html网格。让我们称之为每个项目的存储卡（以下简化的示例）绑定到与foreout绑定的选定项目knockout.js

{ 
    "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>

当卡上的用户点击，我想显示在一个所选择的卡不同的div（在foreach之外）与来自所选json对象的一些更多属性

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

我想是这样（但没有得到任何数据）：

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

来源

2012-07-15 Eystein Bye

你会希望通过跟踪持有卡片视图模型所选择的卡要做到这一点。 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>

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-15 22:31:08 Tyrsius

谢谢。我喜欢你的解决方案的简单性。我不得不使用show wrapper来做更多。似乎选定的卡片随后会作为参数自动发送到该功能。那是对的吗？（卡）; 我使用： } 只是试图了解发生了什么:) – 2012-07-16 06:28:15

它作为参数发送。你应该读这个：http://blog.stevensanderson.com/2011/12/21/knockout-2-0-0-released/ – Tyrsius 2012-07-16 07:17:36

绑定到与foreout绑定的选定项目knockout.js

回答

相关问题