Question

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

我有一个从Backbone.Model扩展的User对象。根据此对象的状态（已验证或未验证），我想更改我的观点。我有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
    };

}）;

我的HomeView

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;
        }
    });

Answer 1

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

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

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

this.model.bind('change',this.render).

Answer 2

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

这是做到这一点的方法。

在视图中：

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

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

像MarionetteJS这样的一些框架确实有一个名为Event Aggregator的构造。这是一种你可以听的活动巴士。我的用户例如在总线上发送'user：login'之类的事件。在视图中我可以在公共汽车上听。

Answer 3

这里有一个简单的例子，说明它是如何运作的。

<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>

如何与Backbone.js中的视图共享和绑定模型

3 个答案: