在Backbone $ el中循环遍历tr元素

Question

我已将我视图中的el设置为特定表格，现在我想逐行遍历该表格，并更新第二个和第三个td 1}}元素。

以下是我最近的尝试（updateCalc方法是我正在工作的地方）。第一次使用Backbone，所以任何智慧的话都非常受欢迎。

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);
       });
   },