骨干传递模型到路由器

Question

我正在开发一个使用require js和Backbone的android应用程序。我必须将通过touchend事件从集合中获取的模型传递给路由器。我该怎么做？

define(["jquery", "underscore","backbone","handlebars", "views/CinemaView", "models/CineDati", "text!templates/listacinema.html"], 

function($,_,Backbone,Handlebars,CinemaView, CineDati, template){ 
    var ListaCinemaView = Backbone.View.extend({ 
    template: Handlebars.compile(template), 
    events: { 
     "touchend" : "Details" 
    }, 
    initialize : function(){ 
     var self = this; 
     $.ajax({ 
      url: 'http://www.cineworld.com/api/quickbook/cinemas', 
      type: 'GET', 
      data: {key: 'BwKR7b2D'}, 
      dataType: 'jsonp', // Setting this data type will add the callback parameter for you 
      success: function (response, status) { 
       // Check for errors from the server 
       if (response.errors) { 
        $.each(response.errors, function() { 
         alert('An error occurred. Please Try Again'); 
        }); 
       } else { 

        $.each(response.cinemas, function() { 
         var cinema = new CineDati(); 
         cinema.set({ id : this.id, name : this.name , cinema_url : this.cinema_url, address: this.address, postcode : this.postcode , telephone : this.telephone }); 
         self.model.add([cinema]); 

        }); 
        self.render(); 
       }} 
     }); 


    }, 

    events : { 
     "#touchend" : Dettagli 
    },  

    render : function(){ 
     $(this.el).empty(); 

     $(this.el).html(template).append(
      _.each(this.model.models, function (cinema) { 
       $("#lista").append(new CinemaView({ 
          model: cinema 
       }).render().el); }, this)); 

      return this; 
    }, 

    Dettagli : function(){ 

     Backbone.history.navigate(this.model , {trigger: "true"}); 
    } 


    }); 
    return ListaCinemaView; 

});  

Answer 1

Router.navigate()不传递任何数据。它设置了url片段并且有几个选项。请参阅该文档在这里：http://backbonejs.org/#Router-navigate

我的建议：

• 使用Router.navigate()更改URL。
• 使用Backbone.Events聚合器触发（或发布）您的事件和数据。

所以说你有一个电影列表，你有一个视图按钮。视图按钮发布它想要显示的模型并更改URL片段。

var vent = _.extend({}, Backbone.Events); // Create your app specific event aggregator 

var ListaCinemaView = Backbone.View.extend({ 

    ... 

    Dettagli : function(){ 
     vent.trigger('movie:show:request', this.model); 

     Backbone.history.navigate(this.model.get('id')); 
    } 
} 

您应用程序中的其他位置为movie:view:request添加处理程序。

vent.on('movie:show:request', showMovieDetails); 

var showMovieDetails = function(model) { ... } 

最后，检查出MarrionetteJS。它使用发布/订阅模式来处理应用程序各部分之间的通信。这是一个非常好的框架，因为您基本上选择了要使用的部分。它有很好的记录和支持。另外，它的创建者Derick Bailey在Stackoverflow上非常活跃，所以你会很快得到帮助。

Answer 2

你需要重写骨干的导航功能如下：

var Router = Backbone.Router.extend({ 
 
    routeParams: {}, 
 
    routes: { 
 
     "home": "onHomeRoute" 
 
    }, 
 
    /* 
 
    *Override navigate function 
 
    *@param {String} route The route hash 
 
    *@param {PlainObject} options The Options for navigate functions. 
 
    *    You can send a extra property "params" to pass your parameter as following: 
 
    *    { 
 
    *    params: 'data' 
 
    *    } 
 
    **/ 
 
    navigate: function(route, options) { 
 
     var routeOption = { 
 
       trigger: true 
 
      }, 
 
      params = (options && options.params) ? options.params : null; 
 
     $.extend(routeOption, options); 
 
     delete routeOption.params; 
 

 
     //set the params for the route 
 
     this.param(route, params); 
 
     Backbone.Router.prototype.navigate(route, routeOption); 
 
    }, 
 

 
    /* 
 
    *Get or set parameters for a route fragment 
 
    *@param {String} fragment Exact route hash. for example: 
 
    *     If you have route for 'profile/:id', then to get set param 
 
    *     you need to send the fragment 'profile/1' or 'profile/2' 
 
    *@param {Any Type} params The parameter you to set for the route 
 
    *@return param value for that parameter. 
 
    **/ 
 
    param: function(fragment, params) { 
 
     var matchedRoute; 
 
     _.any(Backbone.history.handlers, function(handler) { 
 
      if (handler.route.test(fragment)) { 
 
       matchedRoute = handler.route; 
 
      } 
 
     }); 
 
     if (params !== undefined) { 
 
      this.routeParams[fragment] = params; 
 
     } 
 

 
     return this.routeParams[fragment]; 
 
    }, 
 

 
    /* 
 
    * Called when hash changes to home route 
 
    **/ 
 
    onHomeRoute: function() { 
 
     console.log("param =", this.param("home")); 
 
    } 
 

 
})

在这里，我写了一个自定义函数“参数”做了get/set的参数要发送。

我们发送自定义参数，你可以把它像下面这样：

var router = new Router(); 
 
Backbone.history.start({}); 
 
router.navigate("home", { 
 
    params: 'Your data' 
 
});

要检索的回调函数里面获取数据的数据，你可以这样写代码：

this.param("home"); //this will return the parameter you set while calling navigate function or else will return null