如何在backbone.js的視圖的方法中定義視圖元素？

Question

在構建視圖來控制可重用的UI控件（選項卡，模式，警報等）。我希望能夠撥打ui.tabs(options)，然後創建視圖「對象」。

我已經設法到目前爲止，我可以撥打ui.tabs(options)。但是現在我無法弄清楚如何使用views方法設置元素（即：tabs()）。當我將模板設置爲this.el，this.$el或this.$el.html時，我只是得到一個未定義的錯誤。

有人可以解釋我要去哪裏錯了嗎？

這裏是我到目前爲止的代碼（簡單的我知道）：

/* UI Tools */ 
define(
    [ 
     "backbone", 
     "text!templates/ui-tabs.html" 
    ], 
    function (Backbone, tabsTemplate) { 
     var uiView = Backbone.View.extend({ 
      events: { 
       "click .tab": "clickTab" 
      }, 

      initalize: function() { 

      }, 


      /* 
      * TAB CONTROLS 
      */ 
      tabs: function (options) { 
       console.log(options); 
       console.log(this.$el); 

       this.el = $(_.template(tabsTemplate, options)); 


      }, 

      clickTab: function() { 
       console.log('tab clicked'); 
      }, 

      /* 
      * MODAL CONTROLS 
      */ 
      modal: function() { 

      }, 


      /* 
      * ALERT CONTROLS 
      */ 
      alert: function() { 

      }, 


      /* 
      * CORE 
      */ 
      render: function() { 
       return this.$el; 
      } 



     }); 

     return new uiView(); 
    } 
); 

Answer 1

使用下劃線的模板

_.template返回的功能。使用恢復功能來渲染模板：

var templateFunc = _.template(tabsTemplate, options); // returns a function 
templateFunc({ you: "data" }); // returns a string 

Additional information

更改el

✘不要設置el或$el這樣的：

this.el = /* ... */; 

✔相反，使用this.setElement這確保了el和$el設置是否正確，並重新委託的事件：

this.setElement(this.template()); 

• Difference between el and $el
• Using setElement with views in backbone

製作可重用的組件

中的骨幹程序，我我爲每個可重用組件製作了一個視圖，而不是一個視圖所有人的立場。

拆分視圖並返回構造函數以在需要時構建組件。

define([/* ... */], function(/* ... */) { 
    var ModalView = Backbone.View.extend({ 
     /* ... */ 
    }); 

    return ModalView; 
}); 

，做同樣的每一個組成部分。

然後在一個更大的組件中，就像一個頁面佈局一樣，使用很多較小的組件。

define([ 
    'modal-view', 
    'tabs-view' 
], function(ModalView, TabsView) { 
    var Layout = Backbone.View.extend({ 
     /* ... */ 
     initialize: function(){ 
      this.view = { 
       modal: new ModalView(), 
       tabs: new TabsView(), 
      }; 
     }, 
    }); 

    return Layout; 
});