在Knockout.js中用按鈕動態地綁定數據？

Question

我正在使用MVC3與Knockout.js，並希望從api附加一些數據到我的按鈕與data-bind = addContribute在模板中。這個按鈕應該打開一個彈出框，我需要彈出的附加按鈕數據。我怎樣才能做到這一點？

我的模板：

<div> 
     <ul data-bind="template: {name: 'membersTemplate', foreach: viewModel.membersList}"> 
     </ul> 
</div> 

<script id="membersTemplate" type="text/html"> 
    <li> 
     <div class="fl width165"> 
      <img src=" ${ image } " width="33" height="34" /> 
      <span> ${ memberName } </span> 
      ${ memberType } 
     </div> 
     <aside class="fr margint10"> 
      <label> ${ contributions } </label> 
      <a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: viewModel.addContribute" ></a> 
     </aside> 
    </li> 
</script> 

Answer 1

<script id="membersTemplate" type="text/html"> 
    <li> 
     <div class="fl width165"> 
      <img data-bind="attr : {src : img}" width="33" height="34" /> 
      <span data-bind="text : memberName"></span> 
      <span data-bind="text : memberType"></span> 
     </div> 
     <aside class="fr margint10"> 
      <label data-bind="text : contributions"></label> 
      <a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: addContribute" ></a> 
     </aside> 
    </li> 
</script> 

membersList varibale在你的代碼應該是

function SingleMember(img, name, type, contr) 
{ 
    var self = this 
    self.img = ko.observable(img) 
    self.memberName = ko.observable(name) 
    self.memberType = ko.observable(type) 
    self.contributions = ko.observable(contr) 
    self.addContribute = function() { 
     // 
    } 
} 

window.viewModel = new function() 
{ 
    var self = this 
    self.membersList = ko.observableArray() 
    self.membersList.push(new SingleMember(/*.... params1*/)) 
    self.membersList.push(new SingleMember(/*.... params2*/)) 
}