在骨干路由器的一个动作中绑定多个视图

时间:2013-09-30 07:33:27

标签: javascript backbone.js

我在骨干路由器中创建了一个动作:

 routes: {
    "showCart": "cartList",
 }
 .....
 app_router.on('route:cartList', function (showCart) {
    var cartListView = new CartList();
    cartListView.render();
 });

然后我有两个或两个以上的视图要在该动作中呈现。

var SignInView = Backbone.View.extend({
    el : $("#rightpanel"),
    initialize:function(){
        this.render();
    },
    render:function(){
        var template = _.template(signinTemplate, {})
        this.$el.html(template);
    }
});
return SignInView;

var CartListView = Backbone.View.extend({
    el : $("#cartlist"),
    initialize:function(){
        this.render();
    },
    render: function(){
        var item = deserializeJSONToObj(window.localStorage.getItem("Cart"));
        var str = '<table>';
        $.each(item, function(i, item) {
            str += '<tr><td><img src="' + item.PictureName + '" alt="Product" width="135px"/></td><td>'+item.Name+'</td></tr>';
        });
        str += '</table>';
        this.$el.html(str);
    }
});
return CartListView;

如何在路由器中的一个操作中绑定这两个视图?

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:2)

向路由器添加更改

 routes: {
    "showCart": "cartList",
 }
 .....
 app_router.on('route:cartList', function (showCart) {
    var workView = new WorkView();
    workView.render();
 });

创建名为WorkView的视图。

var WorkView= Backbone.View.extend({

    initialize:function(){

    },
    render:function(){
        var signInView = new SignInView ();
        var cartListView = new CartList();
    }
});