Backbone.js Динамический просмотр Tagname?

Question

Я пытаюсь настроить базовую архитектуру для проекта Phonegap с использованием jQueryMobile и Backbone.js
Мы будем ориентироваться на несколько платформ и планировать расширение в будущем.
Я хочу, чтобы мой код на макете полностью не знал о типах элементов HTML, связанных с представлениями, поскольку мы понятия не имеем, как будут выглядеть представления на всех платформах.
Простым примером может быть то, что на одной платформе список элементов может быть сделан из элементов и LI, но по другому нам может потребоваться переключить его на DIV и P элементов.

На данный момент, если я не указываю tagName, по умолчанию он равен DIV.
Я хочу, чтобы быть в состоянии предоставить шаблон, как это на одной странице:

<script id="attachmentTemplate" type="text/template"> 
    <li><a href="#"><%= title %></a></li> 
</script> 

и на другой обеспечивают:

<script id="attachmentTemplate" type="text/template"> 
    <p><a href="#"><%= title %></a></p> 
</script> 

Я не могу сделать это без указания тэгу (как я сказал , по умолчанию он равен DIV).

У кого-нибудь есть какие-либо советы или методы для этого? Ключ в том, что я не хочу, чтобы Javascript знал о типе элемента HTML, я хочу, чтобы HTML определял это.

Answer 1

Хотя я бы не рекомендовал эту архитектуру можно переопределить метод визуализации:

render: function() 
{ 
    // unbind all handlers since delegateEvents was called in the constructor 
    this.undelegateEvents(); 
    // set this.el to the domElement from the templates 
    this.el = this.template(this.model.toJSON()); // or however you get to your template 
    // create the shorthand dom reference that setElement() creates 
    this.$el = $(this.el); 
    // re-delegate the events 
    this.delegateEvents(); 
} 

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

редактировать: глядя через код Backbone, это именно то, что setElement делает, так что в теории вы могли бы попробовать

render: function() 
{ 
    var tpl = this.template(this.model.toJSON()); 
    this.setElement(tpl, true); 
    return this; 
} 

Answer 2

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

я обнаружил, что если я делаю свой шаблон:

<script id="attachmentTemplate" tagname="li" type="text/template"> 
    <a href="#"><%= title %></a> 
</script> 

Тогда в моем JS код, когда инстанцировании мой взгляд, я могу это сделать:
var attachmentView = new AttachmentListItemView({ tagName: $('#attachmentTemplate').attr('tagname'), model: item });

И это прекрасно работает.
Не знаю, будет ли это корректным HTML или вызвать какие-либо проблемы в будущем.

Answer 3

Вы можете указать свойство тэгу в вашей точке зрения с помощью функции, так что это будет динамичным ,

... 

tagName: function(){ 
    return this.model.get('tagName'); 
}, 

... 

Checkout эту скрипку http://jsfiddle.net/b7mR6/