0

ページを変更し、JQM とバックボーンでビューを表示しようとしています。

私のホームページは正常に読み込まれますが、2 番目のページに移動しようとすると、いくつか質問があります。ページは読み込まれますが、何も表示されません

私のアプリにはルーターがあります

 var AppRouter = Backbone.Router.extend({
//define routes and mapping route to the function
    routes: {
        '':    'showHome',         //home view
        'home': 'showHome',        //home view as well
        'products/productList' : 'showProducts',

    },

    initialize:function () {
    // Handle back button throughout the application
    $('.back').live('click', function(event) {
        window.history.back();
        return false;
    });
    this.firstPage = true;
    },

    defaultAction: function(actions){
        this.showHome();
    },

    showHome:function(actions){
        // will render home view and navigate to homeView
        var homeView=new HomeView();
        homeView.render(); 

        this.changePage(homeView, 'fade');
    },



    showProducts:function(){

    var productList=new Products();
    var self = this;

      productList.fetch({
         success:function(data) {   
        self.changePage(new ProductListView({collection:data}));
         }
            }); 

    },

    changePage:function (view, transition) {
        //add the attribute 'data-role="page" ' for each view's div

        if (transition != "slidefade") {
         transition = "pop";                
        }

        view.$el.attr('data-role', 'page');   
        $('.ui-page').attr('data-role', 'page');

        //append to dom
        $('body').append(view.$el);  


        if(!this.init){   
            $.mobile.changePage($(view.el), {changeHash:false, transition: transition});


        }else{   
            this.init = false;
        }            
    }       

});

$(document).ready(function () {
console.log('App Loaded');
app = new AppRouter();
Backbone.history.start();
});

return AppRouter;

ここにも製品の私のビューページがあります

var ProductListView = Backbone.View.extend({

template: _.template(productViewTemplate),

initialize: function () {
        _.bindAll(this, "render");
     this.collection.bind("reset", this.render);
    },

 render: function () {
 var self = this;
        this.collection.each(function(model) {
        self.$el.append(self.template(model.toJSON())); 
        console.log("here");
 });


}

});

return ProductListView;

したがって、homeView 内からページを変更することができます。問題はありません。製品ビューで何かを返さないために何が間違っているのでしょうか。エラーは返されません。

ありがとう

だから私はもう少し仕事をして、ショー製品が機能するようにしました

showProducts:function(){

        var productList=new Products();
        var self = this;
        var productListView =new ProductListView({collection:productList});

 productList.fetch(self.changePage(productListView)); 

    }

これは、ビューが

var ProductListView = Backbone.View.extend({

template: _.template(productViewTemplate),
initialize : function () {
    _.bindAll(this, "render");
    this.collection.bind("reset", this.render, this);

},

 render: function() {
 var self = this;
        this.collection.each(function(model) {
        self.$el.append(self.template(model.toJSON())); 
        console.log("here");
 });


}

});

return ProductListView;

しかし、現在 jQueryMobile はそのコードを追加していないため、スタイリングはありません..

助言がありますか？

4

1 に答える 1

0

Backbone.js のルーターと jQuery Mobile はどちらも を使用してhashtagおり、うまく連携できません。それらを機能させる方法はありますが、特別な理由がない限り、その価値があるかどうかはわかりません。代わりに、このために作成されたjQueryモバイル用のプラグインであるjQuery-Mobile-routerを使用することをお勧めします非常に理由があります (Backbone.js を使用するためです)。おまけとして、jQuery Mobile Router は特別な JQM Pageイベントと連携します。

于 2012-12-06T14:38:38.847 に答える