Backbonejs視圖綁定概念反饋

我遇到了這篇文章（http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/），並想知道在實例化它們之後綁定和渲染路由器視圖是否是最佳實踐。我一直約束我的觀點，並將它們呈現在我的視圖定義中。Backbonejs視圖綁定概念反饋

目前，這是我如何被建立，並要求我的看法：

EmployeeView：

EmployeeView = Backbone.View.extend({ 
    el: '#content', 
    template:template, 

    initialize: function() { 

    this.collection.fetch({ 
     reset: true 
    }); 

    this.collection.on('reset',this.render, this); 
    }, 
    render: function(){ 
    this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('render called');  
    }

我的路由器：

employeeList: function() { 
    var c = new EmployeeCollection 
    new EmployeeView({ 
     collection: c 
    }); 
    }

它工作正常。但根據文章更好的做法是做到以下幾點：

EmployeeView = Backbone.View.extend({ 

    template:template, 

    initialize: function() { 

    this.collection.fetch({ 
     reset: true 
    }); 

    this.collection.on('reset',this.render, this); 
    }, 
    render: function(){ 
    this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('render called'); 
    return this; 
    }

路由器

employeeList: function() { 
    var c = new EmployeeCollection 
    $('#content').html(new EmployeeView({collection: c}).render().el); 
    },

我喜歡的文章中的解決方案，因爲它能夠消除其他DOM事件的觀點作爲文章說和允許我將所有調整和定製集中在一個地方，即路由器。但是因爲我傳入一個集合/模型，並且需要在初始化我的頁面中獲取數據兩次。我的問題是：

這真的是最好的做法嗎？
如果我想使用建議的方法，我該如何避免兩次調用渲染？
如果我有一些情況，我有一些前端用戶交互，然後需要刷新視圖集合/模型會怎麼樣？我需要按照我的觀點來做，還是可以在路由器中發生？

來源

2016-07-04 mo_maat

您在這裏的視圖和文章中的視圖完全不同。

在您的例子中，視圖綁定到一個元素在DOM（#content），
這是不是一個好的做法，特別適合初學者和引起了大量我們每天在這裏看到的錯誤。

例如，如果您創建視圖的2個實例，則事件將開始發射多次，並且所有地獄都會崩潰。

文章中的視圖中創建每個實例存儲器中的新<div>元件，這是一個很好的做法。

現在，添加這個在DOM中，新手往往做的東西像裏面以下視圖的渲染：

$('#content').html(this.$el);

這將創建視圖中的全局選擇器，並使其瞭解外部世界的哪個這不是一個好習慣。

這篇文章可能（我沒看過）解決這個問題，並提出了從路由器向DOM添加視圖元素和替代方法，這在我看來是一種很好的做法。

爲了避免文章你可以在代碼渲染兩次，只是做：

$('#content').html(new EmployeeView({collection: c}).el);

el是一個活的引用，它會被更新時，獲取成功。 .render().el是所有現有博客和教程中常見的錯誤理解傳播。

邊注：由於我們正在討論的最佳實踐，省略了分號和括號中var c = new EmployeeCollection是不是一個好的做法無論是。去var c = new EmployeeCollection();

來源

2016-07-05 05:27:11

你明白了吧。你只是渲染了兩次，我認爲這不是正確的路，因爲沒有意義。

EmployeeView = Backbone.View.extend({ 
    template:template, 

    initialize: function(){ 
    console.log("Will print second"); 
    this.collection.fetch({ reset: true }); 
    this.collection.on('reset', this.appendEmployees, this); 
    }, 
    render: function(){ 
    //this.el.innerHTML = Mustache.to_html(this.template, { employee_list: this.collection.toJSON()}); 
    console.log('Will print 3rd. render called'); 
    return this; 
    } 

    appendEmployees: function(){ 
    console.log("Will print 4th. Appending employees"); 
    $(this.el).html(Mustache.to_html(this.template, {employee_list: this.collection.toJSON() }); 
    } 

})

路由器

employeeList: function() { 
    var c = new EmployeeCollection() 
    var view = new EmployeeView({ collection: c }); 
    console.log("Will print 1st"); 
    $('#content').html(view.render().el); 
}

首先，當你做view.render().el將視圖的元素（這將是空的通過時間）追加到#content

其次，你執行appendEmployees功能時收集重置。在這種情況發生的時候，你的元素將被放置在DOM中。

如果您需要刷新，可以在視圖內完成，調用appendEmployees函數，或者甚至通過重置您的集合。或者，如果您通過骨幹網導航到相同的路線，整個過程將重複進行，因此您的收藏將再次被調用，頁面將從頭開始渲染。因此，這取決於您何時/爲什麼要選擇一個。希望這可以幫助。

來源

2016-07-04 18:09:14 Kumar

Backbonejs視圖綁定概念反饋

回答

相關問題