骨干视图:等到收集集合

Tin*_*ino 3 ajax backbone.js underscore.js

我想知道如何告诉骨干等待我的集合取出模型然后渲染下划线位.

在控制台中,从下划线模板返回缺少字段的错误.当我在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;
});
Run Code Online (Sandbox Code Playgroud)

Pau*_*cke 11

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;
});
Run Code Online (Sandbox Code Playgroud)

另一个替代方法是做一些非常类似的事情,除了使用你可以放在fetch选项中success回调函数.