如何分割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文件？

回答

相關問題