Question

我正在尝试更改页面并使用JQM和骨干显示视图。

我的主页加载正常，但是当我尝试转到第二页时 - 这是我有几个问题的时候。页面加载但没有显示

所以我的应用程序有路由器

 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没有添加其代码，所以它没有样式..

有什么建议吗？

Answer 1

Backbone.js的路由器和jQuery Mobile都使用hashtag并且不能很好地协同工作。有办法让它们工作，但除非你有特定的理由这样做我不确定它是否值得，相反我建议使用jQuery-Mobile-router这是jQuery mobile的插件，是为此创建的非常原因（就是使用Backbone.js）。作为奖励，jQuery Mobile Router与特殊的JQM页面events相关联。

在获取后更改jqm中的页面 - 视图不显示主干

1 个答案: