Backbone ein Modell an Router

Question

Ich entwickle eine Anwendung für Android mit erfordern js und Backbone. Ich muss ein Modell aus einer Sammlung per Touchend Event an den Router übergeben. Wie kann ich es tun?

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() gibt keine Daten weiter. Es legt das URL-Fragment fest und nimmt einige Optionen. Lesen Sie die Dokumentation hier: http://backbonejs.org/#Router-navigate

Mein Vorschlag:

• Verwenden Router.navigate() die URL zu ändern.
• Verwenden Sie den Backbone.Events Aggregator, um Ihr Ereignis und Ihre Daten auszulösen (oder zu veröffentlichen).

Also sagen Sie, Sie haben eine Liste von Filmen, und Sie haben eine Schaltfläche anzeigen. Die Ansicht-Schaltfläche veröffentlicht das gewünschte Modell und ändert das URL-Fragment.

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')); 
    } 
} 

Irgendwo anders in Ihrer Anwendung einen Handler für movie:view:request hinzufügen.

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

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

Zuletzt überprüfen Sie MarrionetteJS. Es verwendet das Publish/Subscribe-Muster für die Kommunikation zwischen Teilen einer App. Es ist ein wirklich netter Rahmen, da Sie sich grundsätzlich für die Teile entscheiden, die Sie verwenden möchten. Es ist sehr gut dokumentiert und unterstützt. Außerdem ist der Ersteller Derick Bailey auf Stackoverflow sehr aktiv, sodass Sie schnell Hilfe erhalten.

Answer 2

Sie müssen das Rückgrat des navigate Funktion wie folgt außer Kraft setzen:

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")); 
 
    } 
 

 
})

Hier habe ich für das Erledigen der get/Satz von Parametern eine benutzerdefinierte Funktion „param“ geschrieben haben, die Sie senden möchten .

nun einen benutzerdefinierten Parameter senden Sie es wie folgt senden:

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

Zum Abrufen der Daten in get Daten innerhalb der Callback-Funktion, die Sie Code wie folgt schreiben:

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