我已經建立了一個內部模板的HTML頁面。請參閱網址的jsfiddle：使用外部模板與敲除的最佳方法

http://jsfiddle.net/hoven002/jQTDH/

什麼是使模板外，以及如何最好的方法是什麼？

問候，肯尼斯

來源

2012-06-05 Kessi

最好的方法，在我看來，就是用這個插件：https://github.com/ifandelse/Knockout.js-External-Template-Engine。

它啓用一個新的模板引擎，將從外部文件中提取模板。它還有一些配置選項以確定模板從哪裏被取出。

來源

2012-06-05 13:11:02

感謝瑞安，所以我必須把這個在我的HTML： <腳本src =「scripts/jquery-ui-1.8.20.js」> 然後我可以製作外部模板文件。我必須使用jquery-tmpl還是隻能使用模板引擎？你知道嗎（小提琴）是否是上述方法的一個例子？ – Kessi

如果您使用'_all.js'版本，那麼您應該不需要TrafficCop或infuser，因爲它們包含在內。否則，你是對的。不確定是否有小提琴，因爲AJAX部分很難僞造。儘管存儲庫中有一個示例。 –

你也不需要使用jQuery模板。您可以使用本機模板。 –

我寫了一個函數，加載模板，沒有任何依賴，但jQuery。您必須將每個<script>標記標記爲您想動態加載的屬性data-template-src，並在其中放置HTML文件的路徑。以下是代碼和示例。

警告：因爲它使用AJAX來加載模板，它需要一個HTTP服務器（它不會與file://協議本地工作）

/main.js

// Loads all the templates defined with the tag data-template-src. 
// Returns a promise that fulfills when all the loads are done. 
function loadTemplates() { 
    var templateLoads = []; 

    $('[data-template-src]').each(function() { 
     var templateElement = $(this); 
     var templateUrl = templateElement.attr('data-template-src'); 

     // Load the template into the element and push the promise to do that into the templateLoads array 
     templateLoads.push(
      $.get(templateUrl) 
      .done(function (data) { 
       templateElement.html(data); 
      }) 
     ); 
    }); 

    return $.when.apply($, templateLoads); 
} 

// When all templates are loaded, apply bindings 
loadTemplates().done(function() { 
    ko.applyBindings({}, document.getElementById("htmlDoc")); 
});

/index.html

<html id="htmlDoc"> 
    <body> 
    <div data-bind="template: { name: 'exampleTemplate' }"></div> 
    <script type="text/html" id="exampleTemplate" data-template-src="/assets/exampleTemplate.html"></script> 

    <script src="/jquery.js"></script> 
    <script src="/knockout.js"></script> 
    <script src="/main.js"></script> 
    </body> 
</html>

/assets/exampleTemplate.html

<h1>Hello world</h1> 

<div data-bind="template: { name: 'exampleSubTemplate' }"></div>

/assets/exampleSubTemplate.html

<h2>How do you do?</h2>

來源

2013-12-19 08:47:13

使用外部模板與敲除的最佳方法

回答

/main.js

/index.html

/assets/exampleTemplate.html

/assets/exampleSubTemplate.html

相關問題