2

我正在尝试使用 jQueryMobile 和 Backbone.js 为 Phonegap 项目设置基本架构。
我们将针对多个平台并计划在未来进行扩展。
我希望我的 Backbone 代码完全不知道与视图关联的 HTML 元素的类型，因为我们不知道视图在平台上会是什么样子。
一个简单的例子是，在一个平台上，项目列表可能由 aUL和LI元素组成，但在另一个平台上，出于某种原因，我们可能希望将其切换为 aDIV和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如果不指定 tagName （正如我所说，它默认为） ，我将无法做到这一点。

有没有人有任何建议或方法来做到这一点？关键是我不希望 Javascript 知道 HTML 元素的类型，我希望 HTML 来定义它。

4

3 回答 3

13

您可以使用函数在视图中指定 tagName 属性，因此它将是动态的。

...

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

...

签出这个小提琴http://jsfiddle.net/b7mR6/

于 2013-09-06T15:06:22.060 回答
4

虽然我不推荐这种架构，但您可以覆盖您的渲染方法：

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

这意味着您无需担心您在模板中定义的 tagName。

编辑：查看主干代码，这正是setElement它所做的，所以理论上你可以尝试

render: function() 
{
    var tpl = this.template(this.model.toJSON());
    this.setElement(tpl, true);
    return this;
}
于 2012-05-16T12:58:34.467 回答
1

像往常一样，我搜索再搜索并没有找到答案，然后我提出一个问题并自己解决。

我发现如果我像这样制作我的模板： 

<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 或会导致任何问题。

于 2012-05-16T12:55:48.523 回答