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视图绑定概念反馈

回答

相关问题