在JQM改变页面抓取后 - 视图不显示骨干

问题描述

我试图改变一个页面，显示与JQM和骨干景色。

I am trying to change a page and display a view with JQM and backbone.

我的主页加载好了，但是当我尝试去到第二页 - 这是当我有几个问题。在页面加载，但没有什么是展示

My home page loads ok but when I try and go to the second page - this is when I have a few questions. the page loads but nothing is showing

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

so my app has a router

 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;

在这里也是我的产品视图页面

here is also my view page for product

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内我可以更改页面这很好我是在产品上错误做什么这个问题的看法它不返回的事返回..没有错误。

So from within the homeView I can change the page and that's fine the issue what am i doing wrong on the products view for it not to return a thing.. no errors are returned.

感谢

所以我做了一些更多的工作，使我的产品展示功能

so I have done some more work and made my show products function

showProducts:function(){

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

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

    }

时的看法是这样的作品

this works when the view is

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犯规其code加那么它有没有定型。

but now jQueryMobile doesnt add on its code so it has no styling..

有什么建议？

推荐答案

Backbone.js的双方的路由器和jQuery Mobile的使用＃标签和不工作这么好起来。有办法让他们的工作，但除非你有特殊的理由这样做，我不知道它的价值的，而不是我推荐使用的这是jQuery Mobile的一个插件，这是因为这个原因产生（即与Backbone.js的工作）。作为奖金了jQuery移动路由器的联系与特殊JQM页面事件。

Both Backbone.js's router and jQuery Mobile use the hashtag and don't work so well together. There are ways to get them to work but unless you have specific reason to do so I'm not sure its worth it, instead I'd recommend using jQuery-Mobile-router which is a plugin for jQuery mobile, that was created for this very reason (that is to work with Backbone.js). As a bonus the jQuery Mobile Router ties in with the special JQM Page events.

这篇关于在JQM改变页面抓取后 - 视图不显示骨干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！