5

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

トランジションのためにここで changePage を使用できますか?

4

1 に答える 1

1

これは init.js ファイルに含めることができます。

(関数($){

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

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

}(jQuery));

ハッシュ リスニングが false に設定されている場合でも、変更ページを使用できます。JQM/バックボーンは、変更ページとハッシュ ルーティングの使用を停止しません。

このリンクをチェックしてください。すべてのフィールドに例がありますが、コントローラー、モデル、およびビューに分割できます

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

上記の例に関連して：

コントローラ：

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

運動はグローバル変数にすることができます。

于 2013-07-15T08:31:38.820 に答える