Question

我刚开始使用Backbone.JS，并且对这应该如何运作有疑问。

我有一个页面应该加载一个运动列表，然后渲染视图。现在，因为体育列表是通过AJAX加载的，所以我需要将事件绑定到集合，这样它才会在实际加载来自该集合的数据时呈现。

这是我到目前为止所得到的：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Test</title>
    <script src="../../src/vendor/zepto.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../src/vendor/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../src/vendor/backbone.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="sportsList"></div>

    <script type="text/template" id="sports-template">
      <ul>
        <% _.each(sports, function(sport){ %>
        <li>
          <%= sport.getDescription() %>
        </li>
        <% }); %>
      </ul>
    </script>

    <script type="text/javascript" charset="utf-8" src="application.js"></script>
  </body>
</html>

关于javascript代码：

var Sport = Backbone.Model.extend({

  getDescription: function() {
    return this.get('description');
  }
});

var Sports = Backbone.Collection.extend({
  model: Sport,
  initialize: function(options) {
    this.bind("refresh", function() {
      options.view.render();
    });

    var sports = this;
    $.ajax({
      url: 'http://localhost:8080/?service=ListSportsService&callback=?',
      dataType: 'jsonp',
      success: function(data) {
        sports.refresh(data);
      }
    });
  }
});

var SportsView = Backbone.View.extend({
  el: '#sportsList',
  template: _.template($('#sports-template').html()),
  initialize: function() {
    this.model = new Sports({view: this});
  },
  render: function() {
    $(this.el).html(this.template({sports: this.model.models}));
    return this;
  }
});

var SportsController = Backbone.Controller.extend({
  routes: {
    'sports': 'listSports'
  },

  listSports: function() {
    new SportsView();
  }
});

$(document).ready(function(){
  window.app = new SportsController();
  Backbone.history.start();
});

真正让我烦恼的部分是必须将视图传递给集合并在那里绑定刷新事件，这样我就可以在一切都被加载后渲染视图。

我的问题是，是否有一种DRYer /更简单的方法可以解决这个问题？

请记住我使用的是ZeptoJS而不是jQuery。

Answer 1

您的收藏应该是

var Sports = Backbone.Collection.extend({
  model: Sport,
  url: '/?service=ListSportsService&callback=?'
});

尽可能使用Backbone.sync功能（这里通过指定集合上的url并使用fetch）。

您的控制器应阅读

var SportsController = Backbone.Controller.extend({
  routes: {
    'sports': 'listSports'
  },

  listSports: function() {
    //create the view with the collection as a model
    this.sports = new Sports();
    this.view = new SportsView({model: this.sports});
    this.sports.bind("refresh", this.view.render);

    // fetch all the sports
    this.sports.fetch();
  }
});

享受。

事件绑定视图和加载AJAX的集合

1 个答案: