javascript - 循环遍历 Backbone $el 中的 tr 元素

Question

我已将 View 中的 el 设置为特定表，现在我想逐行循环该表，并更新第二个和第三个 td 元素。

下面是我最近的尝试(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 元素，而不是您的 Backbone this。为了解决这个问题，您可以将 this 与 that 绑定(bind)，然后使用它。

您还可以使用下划线函数_.bind将this绑定(bind)到您的Backbone View 。

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