0

我是 Backbone.js 的新手。所以我想问一个关于我面临的问题的问题。

我有一个从 Backbone.Model 扩展的用户对象。根据这个对象的状态（认证与否），我想改变我的看法。我有 showView 方法可以渲染我的视图。

对于这种结构，我如何更改 HomeView 的模板并使其能够根据模型进行渲染。我认为，仅仅添加下面的代码是不够的。

this.user.bind('change', this.render);

任何想法或帮助将不胜感激。

我的路由器

  var AppRouter = Backbone.Router.extend({
            routes: {
                '':'showHome',
                'join':'showJoin',
                'join/create':'showRegister',
                'join/complete':'showLoginComplete',
                 // Define some URL routes
                 //  'users': 'showContributors',
                 // Default
                ':actions': 'defaultAction'
            },
            showView: function(view) {
                if (this.currentView)
                {
                    this.currentView.close();
                    $('#tomato').attr("style",";display:none;");
                    $('#tomato').html(view.render().el);
                    $("#tomato").fadeIn("slow");
                }else{
                    $('#tomato').html(view.render().el);
                }
                this.currentView = view;
                return view;
            },
            login_required: function(callback) {
                if (this.user.get('is_authenticated')) {
                    if (callback) callback();
                } else {
                    //route login page...
                }
            },
            login_not_required:function(callback){
                if (this.user.get('is_authenticated')) {
                    //route 404 page...
                    this.navigate(':actions', true);
                } else {

                    if (callback) callback();
                }
            },
            updateUser:function(){
                var $self=this;
                $.get(
                    '/get_identity',
                    function(response){
                        // update model...
                        $self.user.id =response.identity;
                        //check user every five minutes...
                        $self.user.fetch({success: function() {
                           $self.user.set('is_authenticated',true);
                           setTimeout($self.updateUser, 1000*60*5);
                            }
                        },this);
                    }).fail(function(){
                        //clear model
                        $self.user.clear().set($self.user.defaults);
                    });
            }
        });

   var initialize = function(){

        //initialize user and it's checker.

        var app_router = new AppRouter;

        this.user = new User();
        _.bindAll(app_router, 'updateUser');
        app_router.updateUser();

        app_router.on('route:showHome', function(){
            var homeView = new HomeView({user:app_router.user});
            app_router.showView(homeView);
        });
 };
    return {
        initialize: initialize
    };

});

我的主页视图

var HomeView = Backbone.View.extend({
        initialize:function(){
            this.user = this.options.user
        }
        render: function(){
            var headerView = new  HeaderView();
            var footerView = new FooterView();
            this.$el.append(headerView.render().$el);
            this.$el.append(homeTemplate);
            this.$el.append(footerView.render().$el);
            return this;
        }
    });
4

3 回答 3

0

在这里，您有一个简单的例子来说明它是如何工作的。

<html>
    <head>
        <script type="text/javascript" src="./public/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="./public/js/json2.js"></script>
        <script type="text/javascript" src="./public/js/underscore-min.js"></script>
        <script type="text/javascript" src="./public/js/backbone-min.js"></script>

        <script type="text/javascript">

        var User = Backbone.Model.extend({
        defaults : {
       name : 'Damian0o',
       forum : 'stackoverflow'
    }

});


var MyView = Backbone.View.extend({

events: {
    "change input": "update"
},

initialize : function(){
    this.model.on('change',this.updateView,this);           
},

render : function(){
    this.$el.append('<input id="name" value="' + this.model.get('name') + '">');
    this.$el.append('<input id="forum" value="' + this.model.get('forum') +  '">');
},

update : function(){
    console.log(this.$el.find('input').val());
    this.model.set('name',this.$el.find('#name').val());
    this.model.set('forum',this.$el.find('#forum').val());
},

updateView : function(){
    this.$el.find('#name').val(this.model.get('name'));
    this.$el.find('#forum').val(this.model.get('forum'));
}

});


$(function(){


    var user = new User();

    var view = new MyView({
        model : user
    });

    var view2 = new MyView({
        model : user
    });

    view.render();
    view2.render();

    $('#div1').append(view.el);
    $('#div2').append(view2.el);

});

</script>

</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
于 2013-03-06T10:43:43.337 回答
0

你是对的，但是......首先创建没有显式模型对象的视图类。然后用你的模型对象创建实例

var homeView = new HomeView({
   model = user;
});

在初始化视图的功能（当然删除 this.user）时，你应该有这个调用

this.model.bind('change',this.render).
于 2013-03-06T09:11:14.677 回答
0

我认为您在模型中添加侦听器的第一个猜测是正确的。

这是做到这一点的方法。

鉴于：

this.listenTo(this.user, 'change', this.render);

为什么你认为这不是正确的做法？

一些像 MarionetteJS 这样的框架确实有一个称为 Event Aggregator 的结构。这是一种您可以收听的事件总线。例如，我的用户在总线上发送诸如“用户：登录”之类的事件。在视图中我可以在公共汽车上听。

于 2013-03-06T09:11:32.330 回答