如何使用 jQuery Mobile 正确地预先增强 Mustache 模板？

Question

我正在尝试加快基于 jQuery Mobile 和backbone.js 的应用程序的速度，尤其是在增强表单元素时（其中有很多）。我在想我可以让 jQM “预增强”表单模板，然后用增强的标记编译模板函数，而不必在每个页面渲染上增强所有表单元素。在我实现选中/未选中复选框之前，这一直很好。模板基本上看起来像：

<form>
    <fieldset data-role="controlgroup">
        <legend>{{legend}}</legend>
        {{#items}}
        <label for="{{id}}">{{#name}}{{name}}{{/name}}{{^name}}No name given{{/name}}</label>
        <input type="checkbox" id="{{id}}" {{#checked}}checked{{/checked}}>
        {{/items}}
    </fieldset>
</form>

当我在 Backbone-View 中定义模板函数时，我正在尝试执行以下操作：

var preEnhance = $('<div>').hide().html($('#tmpl').html()).appendTo($('body')).trigger('create');
return Mustache.compile(preEnhance.html());

我想用它来处理这样的数据：

{legend: 'Pre Enhanced Forms, How?', items:[{id:'a',name:'A', checked: true},{id:'b',name:'B'},{id:'c'}]}

然而，jQuery Mobile 对{{#checked}}checked{{/checked}} 部分做了一些奇怪的事情：它变成了{{#checked}}checked{{="" checked}}=""，我猜这是由于/ jQM 将解释为结束标记的开头（如果我'我错了）。像这样，我不能再渲染模板了。

我可以为此做点什么吗？难道我做错了什么？有没有更好的方法来使用预先增强的模板？我不想在我的模板中使用增强的硬编码标记。

还有一个（失败的）demo fiddle 供感兴趣的人使用。

Answer 1

试试这个。只需添加选中的属性并传递选中的值。

<input type="checkbox" id="{{id}}" checked="{{#checked}}{{checked}}{{/checked}}" >

我更新了 jsFiddle http://jsfiddle.net/PxfGt/4/