如何分割Javascript和HTML文件？

IM在与jQuery Mobile的工作的时刻。什么是分割Javascript和HTML文件的最佳方式？它可能创建单个视图，并将它们与Ajax加载到代码中？如何分割Javascript和HTML文件？

例子：

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框架。谢谢！

来源

2013-06-18 Philip Giuliani

是的，它是可能的，但这个答案是如何帮助你？ – bksi

难道你说我还怎么样？问题是，我在孔WEBAPP大量Javascript代码，有些观点在多个页面中使用。 –

问题是不是在看法，但你将如何传递一个服务器变量给他们。你必须有一个控制器，可以管理这个。正如我看到你在你的意见中使用Smarty。 – bksi

我发现拆分HTML和JavaScript文件一个非常好的解决方案与jquery.tmpl！

这是一个官方支持的插件：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-21 06:59:09

我觉得AngularJS会允许这种类型的数据绑定：http://angularjs.org/

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

对于具有一般我会建议RequireJS多个js文件（我不知道知道AngularJS有问题需要解决了自己的解决方案。

来源

2013-06-18 09:58:55

如何分割Javascript和HTML文件？

回答

相关问题