我正在尝试加快基于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>
在主干视图中定义模板功能时,我尝试执行以下操作:
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。
最佳答案
试试这个。只需添加checked属性并传递checked值。
<input type="checkbox" id="{{id}}" checked="{{#checked}}{{checked}}{{/checked}}" >
我更新了jsFiddlehttp://jsfiddle.net/PxfGt/4/