骨干视图：等到收集到答案

【问题标题】：Backbone View: Wait until collection fetched骨干视图：等到收集到
【发布时间】：2013-03-22 17:35:33
【问题描述】：

我想知道如何告诉主干等到我的集合获取模型然后渲染下划线位。

在控制台中从下划线模板返回一个字段缺失的错误。当我 console.log(this.collection.toJSON()) 它不显示任何数据。所以我假设，视图是在获取数据之前呈现的。我如何告诉视图等到它被获取？

///////查看////////

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/mitarbeiter',
  'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){



 var MitarbeiterListView = Backbone.View.extend({
    el: $("#container"),
    initialize: function(){
      this.collection = new MitarbeiterCollection;
      this.collection.fetch();
      var newtemplate = MitarbeiterTemplate;
      this.template = _.template($(newtemplate).html());
    },
    render: function(){
      var renderedContent = this.template(this.collection.toJSON());

      $(this.el).html(renderedContent);
      return this;
    }


  });
  // Our module now returns our view
  return MitarbeiterListView;
});

【问题讨论】：

标签： ajax backbone.js underscore.js

【解决方案1】：

像其他人建议的作品一样使用reset，但这里有一个替代方案。

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/mitarbeiter',
  'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){

 var MitarbeiterListView = Backbone.View.extend({
    el: $("#container"),
    initialize: function(){
      this.collection = new MitarbeiterCollection;

      var newtemplate = MitarbeiterTemplate;
      this.template = _.template($(newtemplate).html());
    },
    render: function(){
      var self = this;

      // show some loading message
      this.$el.html('Loading');

      // fetch, when that is done, replace 'Loading' with content
      this.collection.fetch().done(function(){
          var renderedContent = self.template(self.collection.toJSON());
          self.$el.html(renderedContent);
      });
      return this;
    }

  });
  // Our module now returns our view
  return MitarbeiterListView;
});

另一种选择是做一些与此非常相似的事情，除了使用the success callback function，您可以将其放入获取选项中。

【讨论】：

如果你有 jQuery，如果你问我，你使用 Promise 的解决方案是最好的选择。但是如果你不使用 jQuery，那么绑定到 'reset' 事件是可行的方法。
只是想知道为什么var self = this ？我们就不能_.bind(function, this)吗？

【解决方案2】：

这对我来说效果最好：

var ArtistListView = Backbone.View.extend({
        el: '.left',
        initialize:function(){
            this.render();
        },
        render: function () {
            var source = $('#my-list-template').html();
            var template = Handlebars.compile(source);
            var collection = new MyCollection;
            collection.fetch({async:false});
            var html = template(collection.toJSON());
            $(this.el).html(html);
       });

【讨论】：

不推荐这样做，因为它会阻塞线程......另外，这不再起作用，因为最近的 Mozilla Firefox 版本不允许在 jQuery.ajax 中异步。

【解决方案3】：

我不知道有什么办法可以说等待，但我知道你可以告诉骨干网在你的收藏被提取时（重新）渲染。

initialize: function(){
      this.collection = new MitarbeiterCollection;
      this.collection.fetch();
      var newtemplate = MitarbeiterTemplate;
      this.template = _.template($(newtemplate).html());
      this.collection.on('reset', this.render, this);
    },

最后一行监听你的集合的reset 事件。当它被触发时，它会调用render 方法。

【讨论】：

【解决方案4】：

当提取完成时，集合提取会触发事件“重置”。您可以利用 fetch 事件

this.collection.on('reset', this.render);

【讨论】：

【解决方案5】：

fetch 还允许您传递 success 处理函数，该处理函数将在 fetch 成功时调用，即：

  this.collection.fetch({success: this.render});

【讨论】：