2013-05-07 18 views
5

jquery mobile and backbonejs kullanıyorum. , geçiş özelliği etkinken omurga yönlendirmeyle sıkıştı. herhangi bir öneri büyük olacak ..jquery mobil omurga yönlendirme

 define(['jquery'], function ($) { 
     $(document).on("mobileinit", function() { 
      $.mobile.ajaxEnabled = false; 
      $.mobile.linkBindingEnabled = false; 
      $.mobile.hashListeningEnabled = false; 
      $.mobile.pushStateEnabled = false; 
      $.mobile.defaultPageTransition = "slide"; 
    }); 
}); 

ama işleri doesnt slayt geçiş.


yönlendirici kod kullanabileceğimiz

define([ 
'jquery', 
'underscore', 
'backbone', 
'backbone.subroute'], function($, _, Backbone) { 
var AppRouter = Backbone.Router.extend({ 
    routes: { 
     // general routes 
     '': 'defaultAction', 
     'login':'login', 
     'message':'message', 
     'menu': 'mainMenu', 

     // Default 
     '*actions': 'defaultAction' 
    } 
}); 

var initialize = function() { 

     $('.back').live('click', function(event) { 
      event.preventDefault(); 
      window.history.back(); 
      return false; 
     }); 

    var app_router = new AppRouter; 
    app_router.on('route:defaultAction', function(actions) { 
     require(['views/home/register'], function(RegisterView) { 
      // We have no matching route, lets display the home page 
      console.log('At defaultAction'); 
     var registerView = new RegisterView(); 
     registerView.render(); 
      /// this.changePage(loginView, 'slide'); 
     }); 
    }); 

    app_router.on('route:login', function(actions) { 
     require(['views/home/login'], function(LoginView) { 
      // We have no matching route, lets display the home page 
      console.log('At defaultAction'); 
     var loginView = new LoginView(); 
     loginView.render(); 
      /// this.changePage(loginView, 'slide'); 
     }); 
    }); 
    app_router.on('route:mainMenu', function(actions) { 
     require(['views/home/menu'], function(MainMenuView) { 
      console.log('At mainMenu::router'); 
     var mainMenuView = new MainMenuView(); 
     mainMenuView.render(); 
      // this.changePage(mainMenuView, 'slide'); 
}); 
    }); 

altındadır için cal changePage burada geçiş için?

+0

mobileinit işlevi eklenmelidir. ve '.live' yerine onun yerine kullanılmadı. – Omar

+0

@Omar kodun ilk kısmı mobileinit işlevi ve çalışmıyor. – Sameertha

cevap

1

Bu, init.js dosyasında olabilir.

(function ($) {Sen, karma dinleme sahte JQM ayarlandığında bile/omurga değişikliği Sayfası ve karma yönlendirmesini kullanarak bizi durmuyor değişim sayfasını kullanabilirsiniz

var appRouter = Backbone.Router.extend({ 
      routes: { "": "showActivitiesPage" 
      }, 

      showActivitiesPage: function() {     
       $.mobile.changePage("#activities", { reverse: false, changeHash: false });       
      }   
    }); 

}(jQuery)); 

.

hepsi tek fiel o bir örnek vardır bu bağlantıyı kontrol edin ama c denetleyici, model ve görünümde

http://blog.chariotsolutions.com/2011/12/introduction-to-backbonejs-with-jquery.html

içine kırabilir

Kontrol:

(function($){ 
$('#activities').live('pageinit', function(event){ 
    var activitiesListContainer = $('#activities').find(":jqmData(role='content')"), 
     activitiesListView; 
    exercise.initData(); 
    activitiesListView = new exercise.ActivityListView({collection: exercise.activities, viewContainer: activitiesListContainer}); 
    activitiesListView.render(); 
}); 

}(jQuery)); 

Modeli: Yukarıdaki örneğe ontext

(fonksiyonu ($) {

exercise.Activity = Backbone.Model.extend({ 
}); 

exercise.Activities = Backbone.Collection.extend({ 
    model: exercise.Activity, 
    url: "exercise.json" 
}); 

} (jQuery));

Görünüm:

(function($){ 
exercise.ActivityListView = Backbone.View.extend({ 
     tagName: 'ul', 
     id: 'activities-list', 
     attributes: {"data-role": 'listview'}, 

     initialize: function() { 
      this.template = _.template($('#activity-list-item-template').html()); 
     }, 

     render: function() { 
      var container = this.options.viewContainer, 
       activities = this.collection, 
       template = this.template, 
       listView = $(this.el); 

      $(this.el).empty(); 
      activities.each(function(activity){ 
       listView.append(template(activity.toJSON())); 
      }); 
      container.html($(this.el)); 
      container.trigger('create'); 
      return this; 
     } 
    }); 
}(jQuery)); 

egzersiz küresel değişken olabilir. JQuery öğesini yükledikten ve jQuery-Mobile komut dosyalarını yüklemeden önce `telefon numarasına

+0

showPage işlevini showPage olarak nasıl tanımlayabiliriz? – Sameertha

+0

Bu sayfa için görünümü kastediyor musunuz? Gösterme veya sayfa gösterme olayından önceki basit bir sayfa olabilir. Bunun için render yöntemi çağrılır VEYA modeline bir model çağrılır. – Sheetal

+0

modele veya koleksiyona ulaşmak için bazı görünüm kodlarında bana yardımcı olabilirsiniz – Sameertha