Как определить элемент вида в методе вида в 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

Использование шаблонов Underscore в

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

Создание многократно используемых компонентов

В Backbone приложение I я сделал один вид для каждого компонента многократного использования вместо одного в позиция для всех из них.

Разделите представления и верните конструктор, чтобы построить компонент, когда вам это нужно.

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