Как я могу правильно предварительно улучшить шаблоны Mustache с помощью jQuery Mobile?

Я пытаюсь ускорить свое приложение на основе 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 интерпретирует как начало закрывающего тега (поправьте меня, если я ошибаюсь). И вот так я больше не могу отображать шаблон.

Могу ли я что-то с этим сделать? Я делаю что-то неправильно? Есть ли лучший способ использовать предварительно расширенные шаблоны? Я бы не хотел заходить так далеко, чтобы использовать расширенную и жестко запрограммированную разметку в своих шаблонах.

Также есть (неудачная) демонстрационная скрипка для тех, кто заинтересован.


person m90    schedule 22.04.2013    source источник


Ответы (1)


Попробуй это. Просто добавьте проверенный атрибут и передайте проверенное значение.

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

Я обновил jsFiddle http://jsfiddle.net/PxfGt/4/.

person ricardohdz    schedule 25.04.2013
comment
Спасибо, это исправляет {{=", но каким-то образом все флажки будут отмечены, даже если я явно установил для них значение false. - person m90; 26.04.2013
comment
Это связано с тем, что в HTML «checked» и «checked=checked» означают, что флажок должен быть установлен. - person jwadsack; 16.05.2015