通過Backbone循環遍歷tr元素$ el

Question

我在我的視圖中設置了el爲特定表格，現在我想循環遍歷該表格，逐行並更新第二個和第三個td元素。

下面是我最近的嘗試（updateCalc方法是我工作的地方）。第一次使用骨幹，所以任何智慧的話都是值得歡迎的。

var IndexedView = Backbone.View.extend({ 
    initialize: function (args) { 
     _.bindAll(this, 'updateCalc') 
     _.bindAll(this, 'updateAllocation'); 

     //Bind modle change event to view event handler 
     this.model.bind('change:purchasePayment', this.updateAllocation); 
     this.model.bind('change:slidervalue', this.updateAllocation);    
     this.model.bind('change:purchasePayment', this.updateCalc); 
     this.model.bind('change:slidervalue', this.updateCalc); 
     this.model.bind('change:fixedRate', this.updateCalc); 
     this.model.bind('change:returnSpx', this.updateCalc);   
    }, 
    el: $('#IndexedTable'), 

    //TRYING TO LOOP THROUGH TABLE HERE 
    updateCalc: function() { 
     //Illust = Allocation * (1 + spx)^cap hit 
     //Guar = Allocation * (1 + 0)^cap hit 
     var spx = this.model.get('returnSpx'); 

     this.$el.find('tbody tr').each(function (key, row) { 
      console.log(row); 
      var capHit = 1;//row.find('td.capHit'); 
      var illust = this.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit); 
      var guar = this.$el.find('td#allocation').text() * Math.pow(1, capHit); 
      this.children().eq(1).text(value) 
      this.children().eq(2).text(value) 
     }); 
    }, 
    updateAllocation: function() { 
     var value = this.model.get('purchasePayment') * $('#sliderVal').val(); 
     this.$el.find('td#allocation').text(value); 
    } 
}); 

HTML

  <table id="IndexedTable"> 
       <thead> 
        <tr> 
         <th> 
          Indexed 
         </th> 
        </tr> 
        <tr> 
         <td> 
          Allocation 
         </td> 
         <td id="allocation"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Cap hits: 
         </td> 
         <td> 
          Illust 
         </td> 
         <td> 
          Guar 
         </td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="capHit"> 
          0 
         </td> 
         <td> 

         </td> 
         <td> 

         </td> 
        </tr> 
        <tr> 
         <td class="capHit"> 
          1 
         </td> 
         <td> 

         </td> 
         <td> 

         </td> 
        </tr> 
        <tr> 
         <td class="capHit"> 
          2 
         </td> 
         <td> 

         </td> 
         <td> 

         </td> 
        </tr> 
      </table> 

以下是錯誤消息基於哈米爾的評論我得到

Answer 1

你應該嘗試：

updateCalc: function() { 
     //Illust = Allocation * (1 + spx)^cap hit 
     //Guar = Allocation * (1 + 0)^cap hit 
     var spx = this.model.get('returnSpx'); 
     // Tie this to that, so you can use it in your function 
     var that = this; 

     this.$el.find('tbody tr').each(function (key, row) { 
      console.log(row); // row refers to your HTML element 
      var $row = $(row); // $row will refer to your jQuery object 
      var capHit = $row.find('td.capHit').text(); 
      var illust = that.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit); 
      var guar = that.$el.find('td#allocation').text() * Math.pow(1, capHit); 
      $row.children().eq(1).text(value) 
      $row.children().eq(2).text(value) 
     }); 
    }, 

，你遇到的第一個問題是，你處理的HTML元素的jQuery對象，這就是爲什麼你得到你的錯誤控制檯。

第二個問題是this也引用了你的html元素，而不是你的骨幹this。爲了解決這個問題，你可以綁定this到that然後使用它。

您還可以使用下劃線功能_.bind將this綁定到您的Backbone視圖。

updateCalc: function() { 
     //Illust = Allocation * (1 + spx)^cap hit 
     //Guar = Allocation * (1 + 0)^cap hit 
     var spx = this.model.get('returnSpx'); 

     this.$el.find('tbody tr').each(_.bind(function (key, row) { 
      console.log(row); // row refers to your HTML element 
      var $row = $(row); // $row will refer to your jQuery object 
      var capHit = $row.find('td.capHit').text(); 
      var illust = this.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit); 
      var guar = this.$el.find('td#allocation').text() * Math.pow(1, capHit); 
      $row.children().eq(1).text(value) 
      $row.children().eq(2).text(value) 
     }, this)); 
    }, 

Answer 2

這可能是一個黑客，但我也得工作。如果有人有更好的答案會很樂意接受。

updateCalc: function() { 
     //Illust = Allocation * (1 + spx)^cap hit 
     //Guar = Allocation * (1 + 0)^cap hit 
     var spx = this.model.get('returnSpx'); 
     this.$el.find('tbody tr').each(function() { 
      var capHit = $(this).find('td:first').text(); 
      var illust = $('#IndexedTable').find('td#allocation').text() * Math.pow((1 + spx), capHit); 
      var guar = $('#IndexedTable').find('td#allocation').text() * Math.pow(1, capHit); 

      $(this).children().eq(1).text(illust); 
      $(this).children().eq(2).text(guar); 
     }); 
    },