0

現在、jQuery Mobile を使用しています。Javascript と HTML ファイルを分割する最良の方法は何ですか? 単一のビューを作成し、それらを Ajax でコードにロードすることは可能ですか?

例：

view.html

<li>
    <img src="{$image}" alt="{$title}" /> {$title}
</li>

Javascript コード:

for(var i = 0; i < data.channels.length; i++)
{
    var url = data.channels[i].url,
    image = data.channels[i].image,
    title = data.channels[i].name;

    // load view.html and replace variables in each loop, than append view into an div
}

また、jQuery Mobile でうまく機能する MVC フレームワークである可能性もあります。ありがとうございました！

4

2 に答える 2

1

jquery.tmpl を使用して HTML ファイルと Javascript ファイルを分割するための非常に優れたソリューションを見つけました。

これは公式にサポートされているプラ​​グインです: https://github.com/BorisMoore/jquery-tmpl

HTML全体を単一のファイルにまとめました。

例：

templates/channel_row.html

<li>
    <a href="somelink.html?id=${id}" data-transition="slide">
        <img src="#" data-src="${image}" alt="" class="ui-li-icon ui-corner-none" />
        ${name}
    </a>
</li>

そして、私はこのファイルを次のように呼び出しています:

// array with all channels
var channels = [];

for(var i = 0; i < data.channels.length; i++)
{
    // data
    var channel = {
        id: data.channels[i].id,
        name: data.channels[i].name,
        image: data.channels[i].image
    };

    // ad channel to array
    channels.push(channel);
}

$.get("templates/channel_row.html", function(template) {
        $.tmpl(template, channels).appendTo("#listview_channels");
});

お役に立てば幸いです。

于 2013-06-21T06:59:09.500 に答える
1

AngularJS はこのような種類のデータ バインディングを許可すると思います: http://angularjs.org/

どうやら、ある種のアダプターも必要なようです: https://github.com/opitzconsulting/jquery-mobile-angular-adapter

一般的に複数の js ファイルがある場合は、RequireJS をお勧めします (AngularJS に問題に対する独自の解決策があるかどうかはわかりません。

于 2013-06-18T09:58:55.437 に答える