jquery移动 Backbone 路由

我正在使用jquery mobile 和backbonejs。 有点坚持启用转换属性的主干路由。 任何建议都会很棒..

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

但是幻灯片切换不起作用。

<小时 />

路由器的代码如下

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

我们可以使用这里的calchangePage来进行转换吗？

请您参考如下方法:

这可以位于 init.js 文件中。

(函数($){

    var appRouter = Backbone.Router.extend({  
            routes: {   "": "showActivitiesPage" 
            }, 
 
            showActivitiesPage: function() {                 
                $.mobile.changePage("#activities", { reverse: false, changeHash: false });                           
            }            
    });  
 
}(jQuery)); 

您可以使用更改页面，即使哈希监听设置为 false JQM/backbone 也不会阻止我们使用更改页面和哈希路由。

查看此链接，它在所有一个字段中都有一个示例，但您可以将其分解为 Controller 、模型和 View

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

在上面的例子中:

Controller :

(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)); 

型号:

(函数($){

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

}(jQuery));

查看:

(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)); 

exercise 可以是全局变量。