Backbonejs视图绑定概念反馈

Question

我碰到了这篇文章（ http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/ ），并且想知道是否在实例化它们之后的路由器是最佳实践。 我一直在绑定我的视图并在我的视图定义中渲染它们。

目前，这是我一直在设置和调用视图的方式：

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事件脱钩，并使我可以将所有调整和自定义集中在一个地方，即路由器。 但是因为我传入了一个集合/模型，并且需要在初始化时获取数据，所以页面渲染两次。 我的问题是：

1. 这真的是最佳做法吗？
2. 如果要使用建议的方法，如何避免两次调用渲染器？
3. 如果遇到某些前端用户交互，然后需要刷新视图集合/模型的情况，该怎么办？ 我是否必须这样做，或者是否也可能在路由器中发生？

Answer 1

你说得差不多了。 您只是将其渲染两次，我认为这不是正确的方法，因为没有意义。

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函数，甚至重置集合来完成。 或者，如果您通过主干导航到相同的路线，则将重复整个过程，因此将再次调用您的集合，并且页面将从一开始就呈现。 因此，这取决于您何时/为什么选择一个而不是另一个的偏好。 希望这可以帮助。

Answer 2

您在这里拥有的视图与本文中的视图完全不同。

在您的示例中，视图绑定到DOM中的元素（ #content ），
这不是一个好习惯，特别是对于初学者来说，这会导致很多错误，我们每天都在这里看到它们。

例如，如果您创建了2个视图实例，则事件将开始触发多次，并且所有地狱都会崩溃。

---

本文中的视图在每个实例的内存中创建一个新的<div>元素，这是一个好习惯。

现在，加入这DOM，新手经常做的东西像下面的内部视图的渲染：

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

这会在视图内部创建一个全局选择器，并使它意识到外部世界，这不是一个好习惯。

这篇文章（我没有读过）可能解决了这个问题，并提出了从路由器向DOM添加view元素的替代方法，我认为这是一个好习惯。

---

为了避免在文章的代码中呈现两次，您可以执行以下操作：

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

el是实时参考，获取成功后将对其进行更新。 .render().el是由所有现有博客和教程传播的另一个常见误解。

---

旁注：由于我们正在讨论最佳实践，因此在var c = new EmployeeCollection省略分号和括号也不是一个好习惯。 用var c = new EmployeeCollection();