knockout.js로 foreach 바인딩의 선택된 항목에 바인딩

Question

knockout.js와 ko.mapping 플러그인을 사용하여 json 개체 목록을 html 그리드에 바인딩합니다. 나는이 같은 각 elemet를 결합 각 항목에게 카드 (아래 간단한 예)

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

선택된 divson 객체의 속성이있는 다른 div (foreach 제외)

뷰 모델에서 선택한 카드 하나를 누가 바인딩합니까?

내가 좋아하는 뭔가를 시도하는 (그러나 데이터를받지 못하고) 오전 :

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

Answer 1

당신은 카드를 보유하고있는 뷰 모델에서 선택한 카드를 추적하여이 작업을 수행 할 것

. 이 간단한 것을 보여주는 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 함수에서 더 많은 것을 할 필요가 없다면).