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

问题描述：

我是Backbone.js的新手。所以我想问一个关于我面临的问题的问题。如何在Backbone.js中与视图共享和绑定模型

我有一个从Backbone.Model扩展的用户对象。根据这个对象的状态（通过与否），我想改变我的观点。我有showView方法，使我的意见被渲染。

对于此结构，我如何更改我的HomeView的模板并使其能够根据模型呈现。我认为，只是添加下面的代码是不够的。

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

任何想法或帮助将grely赞赏。

我的路由器

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

答

你说得不错，但...首先没有明确的模型对象创建视图类。然后用你的模型

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

的对象创建实例在进行初始化你的视图的功能（删除this.user当然）你应该有这个电话

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

'this.model.bind（'change'，this.render）。'只有这是不够的。因为我需要做一些修改DOM元素的东西。 – ibrahimyilmaz 2013-03-06 09:55:36

在渲染功能中，您还应该将模型中的值放到特定位置。 – Damian0o 2013-03-06 10:03:46

或者您可以使用下划线模板[link]（http://jsfiddle.net/derickbailey/Cpn3g/4/）或[link]（http://backbonefu.com/2012/04/backbone-view-model-binding /） – Damian0o 2013-03-06 10:05:28

答

我想你的第一个猜测给模型添加一个监听器是正确的。

这是做到这一点的方法。

鉴于：

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

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

像MarionetteJS这样的框架确实有一个名为Event Aggregator的构造。这是一种可以听的Event Bus。例如，我的用户在总线上发送'user：login'等事件。在我可以在巴士上听的意见。

我的视图呈现函数是showView。你可以看到这个操作Dom元素。所以只需添加这段代码是不需要的。所以我需要找到一个好方法来做到这一点。 – ibrahimyilmaz 2013-03-06 09:57:12

答

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

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

如果我让你的updateView额外的方法 – ibrahimyilmaz 2013-03-06 12:05:36

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

相关推荐