與視圖和AJAX加載的集合的事件綁定

我開始與Backbone.JS，並有一個關於這應該如何工作的問題。與視圖和AJAX加載的集合的事件綁定

我有一個頁面應該加載體育列表，然後渲染視圖。現在，因爲體育列表是通過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。

來源

2011-01-31 changelog

您將集合傳遞給視圖，而不是相反。設置視圖，然後添加東西到集合中，然後它就可以工作了！ – jrockway 2011-01-31 11:53:20

小心謹慎地回答一個正確答案和代碼示例？ ;-) – changelog 2011-01-31 12:42:40

你的收集應閱讀

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

始終（通過指定收集的網址，並使用取這裏）時，可能使用Backbone.sync功能。

你的控制器應閱讀

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

享受。

來源

2011-02-01 17:27:06 Julien

與視圖和AJAX加載的集合的事件綁定

回答

相關問題