Knockoutjs attr與點擊

Question

我想附加一個點擊事件我的模板裏面每個循環。我的模板看起來像這樣。

<div class="col-md-6" data-bind="foreach: socialData"> 
      <div class="col-md-12 horizontal-padding lib-item" data-category="view"> 
       <div class="lib-panel"> 
        <div class="row box-shadow"> 
         <div class="col-md-4"> 
          <!-- ko if: $data.hasOwnProperty("media_url") --> 
          <img class="lib-img-show" data-bind="attr: { src: media_url }"> 
          <!-- /ko --> 
         </div> 
         <div class="col-md-8"> 
          <div class="lib-row lib-header"> 
           <span> 
           <span data-bind="text: full_name"></span> 
           (<span data-bind="text: user_name"></span>) 
           <!-- ko if: $data.hasOwnProperty("user_image") --> 
           <img class="pull-right img-circle thumbnail" data-bind="attr: { src: user_image }"> 
           <!-- /ko --> 
           </span> 
           <div class="lib-header-seperator"></div> 
          </div> 
          <div class="lib-row lib-desc"> 
           <span data-bind="text: text"></span> 
           <div class="lib-header-seperator"></div> 
           <hr/> 
          </div> 
          <div class="btn-group" role="group" aria-label="..."> 
           <button type="button" class="btn btn-warning feature" 
             data-bind="attr: { id: feature_id }"> 
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>Feature 
           </button> 
           <button type="button" class="btn btn-danger" 
             data-bind="attr: { id: block_id }, click: blockItem"> 
            <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>Block 
           </button> 
           <!-- ko if: $data.hasOwnProperty("media_url") --> 
           <button type="button" class="btn btn-primary download" 
             data-bind="attr: { id: download_id }"> 
            <span class="glyphicon glyphicon-download" aria-hidden="true"></span>Download 
           </button> 
           <!-- /ko --> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

這是我的視圖代碼和ajax調用。

var targeturl = "/ajax/{{ event_id }}/"; 
     var page = "0"; 

     $(function() { 
      function fetch_data() { 
       $.getJSON(targeturl + page, function (data) { 
        // add block, feature and download ids 
        data1.forEach(function (item) { 
         item.block_id = "block-" + item._id; 
         item.feature_id = "feature-" + item._id; 
         item.download_id = "download-" + item._id; 
        }); 

        var viewModel = { 
         socialData: ko.observableArray(data1), 
         blockItem: function(item) { 
          console.log(item); 
         } 
        }; 
        ko.applyBindings(viewModel); 
       }) 
       .error(function() { 
        alert('error'); 
       }); 
      } 


      // start function 
      fetch_data(); 
     }); 

的時候，我添加click到data-bind淘汰賽拋出一個錯誤：

ReferenceError: blockItem is not defined

如何在追加數組項單擊事件。

Answer 1

問題是因爲該函數的存在級別高於數組中當前綁定的項目 - 它正在尋找每個單獨項目上的blockItem。相反，你可以告訴它看起來在父上下文，所以它發現它在你的視圖模型：

<button type="button" class="btn btn-danger" 
    data-bind="attr: { id: block_id }, click: $parent.blockItem">