2013-08-25 7 views
8

पर एक मॉडल पास कर रहा है मैं जेएस और बैकबोन की आवश्यकता के जरिए एंड्रॉइड के लिए एक एप्लीकेशन विकसित कर रहा हूं। मुझे टचेंड इवेंट के माध्यम से राउटर में संग्रह से लिया गया मॉडल पास करना होगा। मैं यह कैसे कर सकता हूं?बैकबोन राउटर

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; 

});  

उत्तर

5

Router.navigate() डेटा दे नहीं करता है। यह यूआरएल टुकड़ा सेट करता है और कुछ विकल्प लेता है। डॉक्स यहाँ देखें: http://backbonejs.org/#Router-navigate

मेरे सुझाव:

  • उपयोग Router.navigate() यूआरएल बदलने के लिए।
  • अपने ईवेंट और डेटा को ट्रिगर (या प्रकाशित) करने के लिए Backbone.Events एग्रीगेटर का उपयोग करें।

तो कहें कि आपके पास फिल्मों की एक सूची है, और आपके पास एक व्यू बटन है। व्यू बटन उस मॉडल को प्रकाशित करता है जो वह दिखाना चाहता है और यूआरएल खंड बदलता है।

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, स्टैक ओवरफ्लो पर बहुत सक्रिय हैं, इसलिए आपको त्वरित सहायता मिल जाएगी।

+0

बहुत बहुत धन्यवाद, आप बहुत मददगार रहे हैं! मैंने पहले से ही marionette.js की जांच की है और मुझे लगता है कि मैं अपने भविष्य के आवेदन के लिए इसका उपयोग करूंगा! :) –

+0

खुशी मैंने मदद की, अगस्तो। आपकी परियोजना के लिए शुभकामनाएं। –

+2

यह समाधान तब खाता नहीं है जब कोई व्यक्ति http: // website/model_id पर पृष्ठ को रीफ्रेश करता है। आप मॉडल का संदर्भ खो देते हैं। –

7

आप निम्नलिखित के रूप में रीढ़ की नेविगेट समारोह ओवरराइड करने के लिए की जरूरत है:

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

 
})

यहाँ मैं मानकों के प्राप्त/सेट करने के लिए एक कस्टम समारोह "param" लिखा है आप भेजना चाहते हैं ।

अब एक कस्टम पैरामीटर भेजने के लिए तो वह ऐसा भेज सकते हैं:

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