綁定到與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

回答

相關問題