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

发布于 2024-10-14 23:59:54 字数 2373 浏览 2 评论 0原文

我开始使用 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();
});

真正让我烦恼的部分是必须将视图传递给集合并在那里绑定刷新事件，以便我可以在加载所有内容后渲染视图。

我的问题是，是否有一种我缺少的更干燥/更简单的方法？

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

原文

I'm starting out with Backbone.JS, and have a question about how this should work.

I have a page which should load a list of sports, and then render the view. Now, because the list of sports is loaded via AJAX, I need to bind events to the collection so that it's only rendered when the data from that collection is actually loaded.

Here's what I've got so far:

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

As for the javascript code:

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

The part that really nags me is having to pass the view to the collection and binding the refresh event there so that I can render the view once everything is loaded.

My question is, is there a DRYer/simpler way of doing this that I'm missing?

Keep in mind I'm using ZeptoJS instead of jQuery.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阿楠 2024-10-21 23:59:54

您的集合应为

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

“享受”。

Your collection should read

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

Always use Backbone.sync functionality when possible (here by specifying the url on the collection and using fetch).

Your controller should read

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

Enjoy.

回复收藏 0 原文

~没有更多了~