骨幹：多次查看事件觸發器

我是Backbone的新手。我想顯示股票列表，用戶可以從列表中打開任何股票並更改股票價值。之後，整個列表應刷新以顯示更改的值。骨幹：多次查看事件觸發器

因此，我發現不僅要創建收集，還要創建收集和庫存模型列表。

爲此，我創建了主表和庫存模型視圖的庫存視圖，用於將行添加到表中，其中每行是單個模型。

所以這是一個集合視圖：

App.Views.StockTable = Backbone.View.extend({ ... initialize: function() { this.render(); }, render: function() { this.$el.html(this.template(this.collection)); this.addAll(); return this; }, addOne: function(stock) { var row = new App.Views.StockRow({ model: stock, suppliers: this.suppliers }); return this; }, addAll: function() { var suppliers = new App.Collections.Suppliers(); var that = this; suppliers.fetch({ success: function() { _.each(that.collection.toJSON(), that.addOne, that); } }); return this; } });

這是我的股票行觀點：

App.Views.StockRow = Backbone.View.extend({ el: 'tbody', templateRow: _.template($('#stockRow').html()), templatePreview: _.template($('#stockPreview').html()), events: { 'click #open': 'open' ... }, initialize: function() { this.render(); }, render: function() { this.$el.append(this.templateRow(this.model)) .append(this.templatePreview({ stock: this.model, suppliers: this.suppliers })); return this; }, open: function(e) { var element = $(e.currentTarget); element.attr('id', 'hide'); $('#stock' + element.data('id')).slideToggle('fast'); } ... });

我寫的只是一段代碼。問題是，當我點擊'#open'時，該事件觸發很多次（正確的集合中的數量元素）。所以當我抓到e.currentTarget時，有很多類似的對象。我做錯了什麼？

來源

2015-02-24 Kamil Davudov

我懷疑你在這裏有很多事情要做。

如果沒有看到您的模板，我懷疑您的每個StockRow行正在渲染一個帶有id="open"的標記。由於ID值應該是唯一的，使用一個類在您的鏈接（例如：class="open"），然後引用這個類在點擊處理程序：

events: { 
    'click .open': 'open' 
}

其次，由於已經有了一個model實例相關聯的StockRow的每個實例使用它，只需使用this.model而不是試圖從currentTarget的data屬性中查找它。

open: function() { 
    $('#stock' + this.model.id).slideToggle('fast'); 
}

但同樣，而不是在你的模板使用id="stock"屬性，使用類...發言權class="stock-preview"。接着尋找，在打開的......

open: function() { 
    this.$el.find('.stock-preview').slideToggle('fast'); 
}

另一片，看起來可疑的東西我是在StockTable鑑於render方法調用this.addAll();。最好的做法是讓render方法呈現狀態，而不是觸發ajax調用來獲取狀態。

例如，在你的初始化，您可以設置一些事件處理程序到您的收藏反應改變狀態（下面是一個不完整的例子，只是希望你能夠在正確的方向前進）：

initialize: function (options) { 
    … 
    _.bindAll(this, 'render', 'renderRow'); 
    this.collection.on('add', this.renderRow); 
    this.collection.on('reset', this.render); 
}, 

render: function() { 
    this.$el.html(this.tableTemplateWithEmptyTBodyTags()); 
    this.collection.each(this.renderRow); 
    return this; 
}, 

renderRow: function() { 
    var row = new App.Views.StockRow({ 
    model:  stock, 
    suppliers: this.suppliers 
    }); 
    this.$el.find('tbody').append(row.render().el); 
    return this;  
}

而且然後在表格視圖外面，你可以做一個suppliers.fetch()。當響應回來時應該觸發重置。

來源

2015-02-24 17:53:40

骨幹：多次查看事件觸發器

回答

相關問題