在Backbone.js + Require.js中使用路由器绑定和呈现集合视图的正确方法

Question

乡亲们！

我一直在使用Backbone.js + Require.js来构建应用程序。 在应用程序中，我具有路由器和绑定到集合的一些视图。 同步集合后将触发视图的render()方法。

所以，这是我首先要做的：

router.js

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/sampleCollection',
  'views/sampleView',
], function($, _, Backbone, SampleCollection, SampleView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '': 'home'
    },
    initialize: function(){ ... },
    home: function(){
      var home = new SampleView({collection: SampleCollection});    
    }  
});

(...)

});

sampleCollection.js

define([
  'jquery',
  'underscore',
  'backbone',
  '../models/SampleModel'
], function($, _, Backbone, SampleModel){

  var SampleCollection = Backbone.Collection.extend({
    url: 'url/to/api/call',
    model: SampleModel,
  });

  var sample_collection = new SampleCollection;
  sample_collection.fetch();

  // Our module now returns our collection
  return sample_collection;
});

sampleView.js

define([
  'jquery',
  'underscore',
  'backbone',
  // Using the Require.js text! plugin, we are loaded raw text
  // which will be used as our views primary template
  'text!templates/sample.html'
], function($, _, Backbone, SampleTemplate){
  var SampleView = Backbone.View.extend({
    el: $('#main'),
    initialize: function(){
      this.listenTo(this.collection, 'sync', this.render);
      this.sampleList = this.collection;

    },
    render: function(){
      // Using Underscore we can compile our template with data
      var data = { ... };
      var compiledTemplate = _.template( SampleTemplate, data );
      // Append our compiled template to this Views "el"
      this.$el.html( SampleTemplate );

      var string = '';

      this.sampleList.each(function(item){
        string += ('<div>data1: ' + item.get('data1') + ', data2: ' + data.get('data2') + ... +'</div>');
      });

      this.$el.append(string);

    }
  });

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

首先，触发路由，从集合触发sync ，并在侦听sync之后呈现视图。 问题是，当我切换到另一个视图并再次返回该视图时，该视图不会呈现，并且不会再次触发sync ，因为该集合是在sampleCollection.js中一次获取的。

为了更改它并在每次点击该路线时使视图呈现，我对代码进行了以下更改：

router.js（新）

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/sampleCollection',
  'views/sampleView',
], function($, _, Backbone, SampleCollection, SampleView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '': 'home'
    },
    initialize: function(){ ... },
    home: function(){

      var sample_collection = new SampleCollection;
      sample_collection.fetch();

      var home = new SampleView({collection: sample_collection});    
    }  
});

(...)

});

...和...

sampleCollection.js（新）

define([
  'jquery',
  'underscore',
  'backbone',
  '../models/SampleModel'
], function($, _, Backbone, SampleModel){

  var SampleCollection = Backbone.Collection.extend({
    url: 'url/to/api/call',
    model: SampleModel,
  });

  return SampleCollection;
});

！ 大量的代码！

进行了这些更改后，现在就呈现了视图，因为每次我点击路线时，都会提取一个新的集合并触发sync 。 但是我不知道这是最好的方法，还是有更好的方法 。 任何人都建议有更好的方法，或者我做对了吗？

不管怎么说，还是要谢谢你！

Answer 1

您不应该一次又一次地重复同一收藏。 但是仅当您需要服务器中的一些新数据时。

因此，如果您想在每次触发“ home”路由时重新呈现列表（aka home ），只需再次render() home（它已经保存了数据/集合）：

router.js（新）

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/sampleCollection',
  'views/sampleView',
], function($, _, Backbone, SampleCollection, SampleView){


  // Unique instances (private)
  var sample_collection = new SampleCollection,
      home = new SampleView({collection: sample_collection});

  sample_collection.fetch();

  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '': 'home'
    },
    initialize: function(){ ... },
    home: function(){

      // Whether it holds the data or not render the view.
      // It will be re-rendered anyway when `sync` will be triggered
      home.render();
    }  
  });

(...)

});

注 ： sample_collection和home可能应该只创建一次。

另外，您可能想听集合上的add ， remove ， reset 事件 ：

this.listenTo(this.collection, 'reset', this.render);
this.listenTo(this.collection, 'add', this.renderOneItem); // To be defined
this.listenTo(this.collection, 'remove', this.removeOneItem); // To be defined