如何使用子视图中Backbone.js的

我建立一个简单的绘图应用程序，显示它们的每一个包括以下型号机场，航线有：如何使用子视图中Backbone.js的

机场（代码一样JFK，纬度/经度和城市名）
路线（例如：JFK to SFO，LGA to YYZ等）

我能够从我的后端服务检索每个机场的道路像这样，然后渲染每条路线的列表的一部分，最终将它们添加到图：

RoutesView = Backbone.View.extend({ 
    el: $("body"), 
    // template: Handlebars.compile($("#routes-template").html()), 
    events: { 
     "click #update": "getRoutes", 
     "click #submit-button": "getRoutes" 
    }, 
    initialize: function() { 
     console.log("Initializing RoutesView"); 
     this.input = $("#airport-code"); 
     this.collection = new Routes; 
     this.collection.bind("reset", this.render, this); 
     this.collection.bind("add", this.addOne, this); 
     this.collection.bind('all', this.render, this); 
     // this.collection.fetch({ data: jQuery.param({airport_code: this.input.val()}) }); 
     // this.routes = new Routes; 
     // this.routes.bind('add', this.addOne, this); 
     // this.routes.bind('reset', this.addAll, this); 
    }, 
    getRoutes: function() { 
     console.log("fetching new routes getRoutes()"); 

     // this.routes.fetch({ data: jQuery.param({airport_code: this.input}) }); 
     this.collection.fetch({ data: jQuery.param({airport_code: this.input.val()}) }); 

    }, 
    addOne: function(route) { 
     console.log(route); 
     // console.log("adding one route..."); 
     var view = new RouteView({model: route}); 
     view.render(); 
    }, 
    render: function() { 
     $("#map-container").gmap3({ action: 'addMarker', address: this.input.val(), map: {center: true, zoom: 7 }, marker:{ options:{ draggable: false } } }); 
     $(".helptext").remove(); 
     $("#airport-headline").text("Flights from " + this.input.val()); 
    } 
}); 

RouteView = Backbone.View.extend({ 
    tagName: "div", 
    template: Handlebars.compile($("#route-template").html()), 
    events: { 
     "click .more"    : "showMore", 
    }, 

    showMore: function() { 
     var routeid = this.model.get('id'); 
     console.log("Showing more info for route id #" + routeid); 
     // this.model.toggle(); 
    }, 
    render: function() { 
     console.log("Rendering route..."); 
     $("#map-container").gmap3({ action: 'addMarker', address: this.model.get("source_airport"), map: {center: true, zoom: 7 }, marker:{ options:{ draggable: false } } }); 
     $("#routes").append("<div>hi</div>"); 
     return this; 
    } 
});

我看到路线收集并得到初始化，但会在哪里我通过它循环，使相应的RouteView为每个路由？

来源

2011-10-03 Avishai

逻辑位置是在从服务器获取路由数据之后。

你有两个选择：

有一个RoutesView，一个视图，显示了整个路线集合。
有一个RouteView在Routes集合

首先每个元素更有效，特别是如果你有你的收藏在许多路线。如果您加载路线集合，显示它，然后在新的搜索中加载另一个集合并显示它，那么使用它很有用。

如果在显示集合之后用户可以与之交互，则第二种方法更有用。然后在每个视图实例上，您可以拥有一个事件监听器（前者用于单击或鼠标悬停事件），而在“单视图”方法中，您只能获得一个全局监听器，并且必须找出发生哪个路由。

来源

2011-10-03 17:50:47 dira

我去了第二个选项。然而，现在我似乎无法得到每个子视图的render（）方法。 – Avishai

检查您的渲染方法是否在每个RouteView上调用。如果是，并且您在DOM中看不到结果，那是因为您必须将该元素自己附加到DOM。 http://documentcloud.github.com/backbone/#View-el – dira

在AirportView initialize功能：

this.collection = Routes; this.collection.bind("reset", this.render, this);

我没有开放的项目了，但我认为这是缺少。

希望它有帮助。

来源

2011-10-03 17:48:42 noir

如何使用子视图中Backbone.js的

回答

相关问题