0

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

});

マイホームビュー

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

あなたはまったく正しいですが...まず、明示的なモデルオブジェクトなしでビュークラスを作成します。次に、モデルのオブジェクトを使用してインスタンスを作成します

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のような一部のフレームワークには、EventAggregatorと呼ばれる構造があります。それはあなたが聞くことができる一種のイベントバスです。たとえば、私のユーザーはバス上で「user：login」のようなイベントを送信します。ビューで私はバスで聞くことができます。

于 2013-03-06T09:11:32.330 に答える