backbone.js - 从另一个 View 调用 View 函数 - Backbone

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 中每个问题的常用解决方案，你可以为任何你想要的东西制作模型，你甚至可以制作临时模型来严格地将东西粘合在一起。