Question

我的申请中有以下观点。基本上我想在点击App.HouseListElemView的li时调用App.MapView中的show_house（）。

这样做的最佳方式是什么？

App.HouseListElemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': function() {
            // call show_house in App.MapView
        }
    },
    initialize: function() {
        this.template = _.template($('#house-list-template').html());
        this.render();
    },
    render: function() {
        var html = this.template({model: this.model.toJSON()});
        $(this.el).append(html);
    },   
});

App.MapView = Backbone.View.extend({
   el: '.map',
   events: {
       'list_house_click': 'show_house',
   },
   initialize: function() {
       this.map = new GMaps({
           div: this.el,
           lat: -12.043333,
           lng: -77.028333,   
       });
       App.houseCollection.bind('reset', this.populate_markers, this);
   },
   populate_markers: function(collection) {
       _.each(collection.models, function(house) {
            var html = 'hello'
            this.map.addMarker({
                lat: house.attributes.lat,
                lng: house.attributes.lng,
                infoWindow: {
                    content: html,
                }                
            });
       }, this);
   },
   show_house: function() {
       console.log('show house');
   }
});

Answer 1

当前的房子实际上是应用程序全局状态的一部分，因此创建一个新模型来保存您的全局应用程序状态：

var AppState  = Backbone.Model.extend({ /* maybe something in here, maybe not */ });
var app_state = new AppState;

然后，您的HouseListElemView可以通过在app_state中设置值来响应点击次数：

App.HouseListElemView = Backbone.View.extend({
    //...
    events: {
        'click': 'set_current_house'
    },
    set_current_house: function() {
        // Presumably this view has a model that is the house in question...
        app_state.set('current_house', this.model.id);
    },
    //...
});

然后您的MapView只是从'change:current_house'收听app_state个事件：

App.MapView = Backbone.View.extend({
    //...
    initialize: function() {
        _.bindAll(this, 'show_house');
        app_state.on('change:current_house', this.show_house);
    },
    show_house: function(m) {
        // 'm' is actually 'app_state' here so...
        console.log('Current house is now ', m.get('current_house'));
    },
    //...
});

演示：http://jsfiddle.net/ambiguous/sXFLC/1/

您可能希望current_house成为一个真正的模型，而不仅仅是id，但这很容易。

一旦拥有app_state，您可能会找到各种其他用途。您甚至可以免费添加一些REST和AJAX并为您的应用程序设置获得持久性。

事件是Backbone中每个问题的常用解决方案，你可以为你想要的任何东西制作模型，你甚至可以制作临时模型，以便将事物粘合在一起。

从另一个视图调用视图函数 - Backbone

1 个答案: