骨幹傳遞模型到路由器

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