2

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'}]}

{{#checked}}checked{{/checked}}それでも、jQuery Mobile はその部分で奇妙なことを行います。これは、jQM が終了タグの開始として解釈{{#checked}}checked{{="" checked}}=""するためだと思い/ます (間違っている場合は訂正してください)。このように、もうテンプレートをレンダリングできません。

これについて何かできることはありますか？私は何か間違ったことをしていますか？拡張前のテンプレートを使用するより良い方法はありますか? テンプレートで強化されたハードコードされたマークアップを使用することはしたくありません。

興味のある人のための (失敗した)デモ フィドルもあります。

4

1 に答える 1

0

これを試して。checked 属性を追加して、checked 値を渡すだけです。

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

jsFiddle http://jsfiddle.net/PxfGt/4/を更新しました

于 2013-04-25T03:19:32.827 に答える