0

我目前正在使用 jQuery Mobile。拆分 Javascript 和 HTML 文件的最佳方法是什么？是否可以创建单个视图，并使用 Ajax 将它们加载到代码中？

例子：

视图.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

我认为 AngularJS 会允许这种数据绑定：http ://angularjs.org/

显然你还需要某种适配器：https ://github.com/opitzconsulting/jquery-mobile-angular-adapter

对于一般拥有多个 js 文件，我会推荐 RequireJS（我不知道 AngularJS 是否有自己的解决方案来解决需要解决的问题。

于 2013-06-18T09:58:55.437 回答
1

我找到了一个非常好的使用 jquery.tmpl 拆分 HTML 和 Javascript 文件的解决方案！

它是官方支持的插件：https ://github.com/BorisMoore/jquery-tmpl

我现在将整个 HTML 保存在单个文件中。

例子：

模板/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 回答