對所有視圖都支持的骨幹視圖事件

Question

我正在做我的第一個骨幹應用程序，並且我嘗試附加事件時發生了一件奇怪的事情。

我得到這個代碼至今：

//View for @girl, EDIT action 
GirlEditView = Backbone.View.extend({ 
    initialize: function(el, attr) { 
     this.variables = attr; 
     console.log(attr); 
     this.render(); 
    }, 
    render: function() { 
     var template = _.template($("#girl_edit").html(), this.variables); 
     $(this.el).html(template); 
     $("#edit_girl").modal('show'); 
    } 
}); 

//View for @girl 
GirlView = Backbone.View.extend({ 
    initialize: function(el, attr) { 
     this.variables = attr; 
     this.render(); 
    }, 
    render: function() { 
     var template = _.template($("#girl_template").html(), this.variables); 
     $(this.el).html($(this.el).html() + template); 
    }, 
    events: { 
     "click p.modify": "modify" 
    }, 
    modify: function() { 
     //calls to modify view 
     new GirlEditView({el : $("#edit_girl")}, this.variables); 
    } 
}); 


//One girl from the list 
Girl = Backbone.Model.extend({ 
    initialize: function() { 
     this.view = new GirlView({el : $("#content")}, this.attributes); 
    } 
}); 

//all the girls 
Girls = Backbone.Collection.extend({ 
    model: Girl, 
}); 




//do magic! 
$(document).ready(function() { 

    //Underscore template modification 
    _.templateSettings = { 
     escape : /\{\[([\s\S]+?)\]\}/g, 
     evaluate : /\{\[([\s\S]+?)\]\}/g, 
     interpolate : /\{\{([\s\S]+?)\}\}/g 
    } 

    //get initial data and fill the index 
    var list = []; 
    $.getJSON('girls.json', function(data) { 
     list = []; 
     $.each(data, function(key, val) { 
      list.push(new Girl(val)); 
     }); 

     var myGirls = new Girls(list); 
     console.log(myGirls.models); 
    }); 
}); 

正如你所看到的。

我正在使用一個集合來存儲所有的女孩，並且數據來自Ruby中的REST api。

每個女孩創建一個新的模型實例，並在裏面附加一個視圖實例。

我不知道這是否是一個好的做法，但我想不出一個更好的方法來做到這一點。

每個視圖都使用唯一的ID生成內容。女孩1女孩2繼續。

現在，該模板有一個編輯按鈕。 我最初的想法是攻擊onclick事件並觸發編輯視圖來呈現。

這是按預期工作。

的proble迄今：

當事件觸發，所有的集合（女孩）火編輯視圖，而不是「擁有」渲染視圖之一。

我的問題是我做錯了什麼？

非常感謝

Answer 1

所有編輯觀點上來，因爲所有的GirlViews都使用相同的el：

this.view = new GirlView({el : $("#content")}, this.attributes); 

，然後渲染可以追加更多的HTML：

render: function() { 
    var template = _.template($("#girl_template").html(), this.variables); 
    $(this.el).html($(this.el).html() + template); 
} 

在視圖的el上使用delegate綁定主幹事件。因此，如果多個視圖共享相同的el，那麼您將有多個delegate附加到相同的DOM元素，並且您的事件會混亂不清。

你有些事倒退：模特沒有自己的觀點，觀看模特和收藏並回應他們的事件。你會看到這個right in the documentation：

構造函數/初始化new View([options])

[...]有跡象表明，如果獲得通過，將直接連接到視圖幾個特殊選項：model，collection， [...]

一般情況下，您創建一個集合，c，然後交給它該集合創建視圖：

var v = new View({ collection: c }) 

，或者你創建一個模型，m，然後圍繞該包裹視圖模型：

var v = new View({ model: m }) 

然後視圖結合於收集或模型事件，以便它可以更新其作爲基礎數據的變化顯示。該視圖還充當Backbone中的控制器，並將用戶操作轉發給模型或集合。

你的初始化應該看起來更像是這樣的：

$.getJSON('girls.json', function(data) { 
    $.each(data, function(key, val) { 
     list.push(new Girl(val)); 
    }); 

    var myGirls = new Girls(list); 
    var v  = new GirlsView({ collection: myGirls }); 
}); 

，然後GirlsView將通過收集旋轉併爲每個模型創建單獨GirlView S：

var _this = this; 
this.collection.each(function(girl) { 
    var v = new GirlView({ model: girl }); 
    _this.$el.append(v.render().el); 
}); 

然後，GirlView會使這樣的：

// This could go in initialize() if you're not certain that the 
// DOM will be ready when the view is created. 
template: _.template($('#girl_template').html()), 
render: function() { 
    this.$el.html(this.template(this.model.toJSON()); 
    return this; 
} 

結果是，每個每個模型視圖將具有其自己的不同el來本地化事件。這也使得添加和刪除GirlView非常容易，因爲一切都很好地包裝在自己的el中。