Question

我正在使用骨干开发可重用的主细节网格组件，并且我正在尝试添加一个事件，当用户单击主网格中的行时，该事件将加载细节网格。我无法确定如何创建函数来实现此目的，以及如何从演示页面将参数传递给详细信息网格的视图？这些参数应该转到加载细节网格的函数。我将在一个演示页面中创建组件的实例并将数据模型传递给它。

Answer 1

基本上在Backbone中，为了更好地在两个组件之间进行通信，您需要做的就是创建一个自定义的js对象并让它扩展Backbone.Events（http://backbonejs.org/#Events）

然后定义自定义事件和回调来处理自定义事件。

// A CUSTOM JS OBJECT THAN HANDLES ALL OUR APP'S CUSTOM EVENTS.
var MyAppEventBus = _.extend({},Backbone.Events);

// Options is a Javascript object that contains details required
// load the details data grid.
MyAppEventBus.on("datagrid:showDetailsView",function(options){
    // LOAD THE DATA REQUIRED FOR THE DETAILS GRID.
    // CREATE A DETAILS GIRD VIEW AND PASS THE DATA TO THE DETAILS GRID VIEW INSTANCE.
});

在主数据网格组件视图类中，定义一个侦听器和一个回调来侦听触发打开详细信息网格的事件。

在该事件处理程序中准备一个javascript对象，其中包含您认为对于详细信息网格查询/显示所必需的数据。例如，您还可以传递容器的id，该容器在每行创建详细信息可以在UI中为该行放置网格。

使用您将事件总线对象作为参数传递创建的javascript对象来触发自定义事件。

//In the main data grid view have an event listener that handles 
//the click to open child grid view.
events :{
    "click .showDetailGridlnk" : "showDetailsGrid"
},
showDetailsGrid : function(event) {
    event.preventDefault();
    // PREPARE THE OPTIONS OBJECT HERE
    var options = {};
    // YOU CAN ALSO SET A DYNAMICALLY GENERATED CONTAINER #ID IN OPTIONS
    // WHICH CAN BE USED TO INSERT THE DETAILS DATA GRID.
    options.el = "<some_dynamic_container_id>";
    MyAppEventBus.trigger("datagrid:showDetailsView",options) 
}

如何在主服务器中调用详细信息网格作为单击事件

1 个答案: