Javascript 带有视图和AJAX加载集合的事件绑定_Javascript_Backbone.js

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

javascript backbone.js

Javascript 带有视图和AJAX加载集合的事件绑定,javascript,backbone.js,Javascript,Backbone.js,我从Backbone.JS开始，有一个关于如何工作的问题我有一个页面，应该加载运动列表，然后呈现视图。现在，因为运动列表是通过AJAX加载的，所以我需要将事件绑定到集合，以便仅当来自该集合的数据实际加载时才会呈现以下是到目前为止我得到的信息： <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Te

我从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>

真正困扰我的部分是必须将视图传递到集合，并在那里绑定刷新事件，以便在加载所有内容后可以呈现视图

我的问题是，有没有一种更简单的方法让我错过了

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

您的收藏应该是

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

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();
  }
});

尽可能始终使用Backbone.sync功能（此处通过在集合上指定url并使用fetch）

控制器应为

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

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();
  }
});

享受。

您可以将收藏传递给视图，而不是相反。设置视图，然后向集合中添加内容，然后一切正常！你愿意用一个正确的答案和一个代码示例来证明这一点吗？；-）在SportsView中不作为“this”工作。render（）是模型，而不是视图。不跟随您。。。渲染中的“this”是您的视图。（旁注您必须删除视图中的initialize函数）它将事件处理程序绑定到渲染函数，这是正确的，但这里的问题是在render（）中，“this”是运动集合，而不是视图对象。您需要正确绑定它。在您的视图初始化函数中，添加以下内容：u.bindAll（这个“render”）要不要提出一个更好的建议，@rajkamal？我全力以赴把事情做好！