Как использовать подпредставления в backbone.js

Question

Я создаю простое картографическое приложение, которое показывает маршруты из каждого аэропорта, включая следующие модели:

• Аэропорт (код, например 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 для каждого маршрута?

Answer 1

Логическое место - после получения данных Routes с сервера.

У вас есть два варианта:

• Иметь RoutesView, одно представление, которое показывает всю коллекцию Routes.
• Иметь RouteView для каждого элемента в коллекции Routes

Первый способ более эффективен, особенно если в вашей коллекции много маршрутов.И это полезно использовать, если вы загружаете коллекцию маршрутов, отображаете ее, а затем при новом поиске загружаете другую коллекцию и отображаете ее.

Второй подход более полезен, если после отображения коллекциипользователь может взаимодействовать с ним.Затем в каждом экземпляре представления вы можете иметь прослушиватель событий (например, для событий click или mouseover), в то время как при подходе «одно представление» вы получаете только одного глобального прослушивателя и вам необходимо выяснить, на каком из маршрутов это произошло.

Answer 2

В функции AirportView initialize:

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

У меня сейчас нет открытого проекта, но я думаю, что его нет.это помогает.