如何在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; 
     } 
    });

來源

2013-03-06 ibrahimyilmaz

你說得不錯，但...首先沒有明確的模型對象創建視圖類。然後用你的模型

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

的對象創建實例在進行初始化你的視圖的功能（刪除this.user當然）你應該有這個電話

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

來源

2013-03-06 09:11:14 Damian0o

'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'等事件。在我可以在巴士上聽的意見。

來源

2013-03-06 09:11:32 pfried

我的視圖呈現函數是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>

來源

2013-03-06 10:43:43 Damian0o

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

如何在Backbone.js中與視圖共享和綁定模型

回答

相關問題