Chức năng xem cuộc gọi từ một giao diện khác - Backbone

Question

Tôi có các chế độ xem sau đây trong ứng dụng của mình. Về cơ bản tôi muốn gọi show_house() trong App.MapView khi li của App.HouseListElemView được nhấp.

Cách tốt nhất để làm điều này là gì?

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

Ngôi nhà hiện nay thực sự là một phần của tình trạng toàn cầu của ứng dụng của bạn để tạo ra một mô hình mới để giữ trạng thái ứng dụng toàn cầu của bạn:

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

Sau đó HouseListElemView của bạn có thể đáp ứng với nhấp chuột bằng cách thiết lập một giá trị trong 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); 
    }, 
    //... 
}); 

và sau đó MapView của bạn chỉ đơn giản là lắng nghe cho 'change:current_house' sự kiện từ 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')); 
    }, 
    //... 
}); 

Demo: http://jsfiddle.net/ambiguous/sXFLC/1/

Bạn có thể muốn current_house trở thành một mô hình thực tế chứ không phải chỉ đơn giản là id tất nhiên nhưng đó là dễ dàng.

Có thể bạn sẽ tìm thấy tất cả các cách sử dụng khác cho app_state khi bạn có. Bạn thậm chí có thể thêm một chút REST và AJAX và nhận được sự kiên trì cho các thiết lập ứng dụng của bạn khá nhiều miễn phí.

Sự kiện là giải pháp thông thường cho mọi vấn đề trong Backbone và bạn có thể tạo mô hình cho bất kỳ thứ gì bạn muốn, thậm chí bạn có thể tạo mô hình tạm thời để dán mọi thứ lại với nhau.