1. 首頁
  2. 問答
  3. 在KnockoutJS中使用外部模板

在KnockoutJS中使用外部模板

2012-02-28 87 views
15

是否可以在KnockoutJS中使用外部模板？在KnockoutJS中使用外部模板

<script type="text/html" id="a_template" src="templates/a_template.html"> 
</script>

我試過這個解決方案，但沒有得到它的工作。

來源

2012-02-28 KebdnK

+0

您還可以檢查這個問題：http://stackoverflow.com/questions/17073648/load-knockout-template-from-external-file-without-complex-engine。它討論了KnockoutJS的外部模板，而不使用第三方框架。 – 2014-01-25 10:58:41

回答

6

你也可以看看：

https://github.com/ifandelse/Knockout.js-External-Template-Engine

來源

2012-02-28 11:33:08

+0

謝謝，這看起來很直截了當。 – KebdnK 2012-02-28 11:43:03

+2

*在您的HTML文件中，引用jQuery，jquery-tmpl（如果您使用的是jquery模板），knockout.js，TrafficCop，infuser和koExternalTemplateEngine.js文件* - 它看起來不是很輕巧:) – soniiic 2012-02-28 11:45:55

+1

您可以還可以引用包含模板引擎，TrafficCop和infuser的koExternalTemplateEngine_all.js。所有這三個庫都是由Jim編寫的，因爲他認識到這些功能在KO之外有用。 – 2012-02-28 14:13:56

23

你可以使用jquery動態加載html到腳本元素中，然後根據它執行knockout。

<script type="text/html" id="template_holder"></script> 
<script type="text/javascript"> 
$('#template_holder').load('templates/a_template.html', function() { 
    alert('Load was performed.'); 
    //knockout binding goes here 
});</script>

你淘汰賽綁定必須在思想上的回調函數來完成，否則有一個機會，你會嘗試綁定頁面加載

UPDATE之前，這裏是我編寫的例子上的jsfiddle演示動態加載：http://jsfiddle.net/soniiic/2HxPp/

來源

2012-02-28 11:20:13 soniiic

+0

謝謝，但我認爲外部模板引擎更好一些，因爲它隱藏了所有的請求。 – KebdnK 2012-02-28 11:46:38

+1

好的:)但請記住，用戶仍可以查看請求：http://code.google.com/chrome/devtools/docs/network-files/network_panel.png – soniiic 2012-02-28 11:55:19

+0

這是一個很好的解決方案。下面是一個div模板佔位符的敲除綁定示例： ko.applyBindings（myViewModel，$（'＃template_holder'）[0]）; – ROFLwTIME 2013-01-24 21:15:45

2

這裏提到的3個庫背後的作者是一個小的功能建築關閉soniiic的回答：

function loadExternalKnockoutTemplates(callback) { 
    var sel = 'script[src][type="text/html"]:not([loaded])'; 
    $toload = $(sel); 
    function oncomplete() { 
     this.attr('loaded', true); 
     var $not_loaded = $(sel); 
     if(!$not_loaded.length) { 
      callback(); 
     } 
    } 
    _.each($toload, function(elem) { 
     var $elem = $(elem); 
     $elem.load($elem.attr('src'), _.bind(oncomplete, $elem)); 

    }); 
}

這會自動加載你的文檔中的所有淘汰賽的模板，提供了他們的SRC設置及其類型爲「text/html的」。傳入回調以在所有模板加載時收到通知。不知道如果其中任何一個失敗會發生什麼。

用法示例：

<head> 
    <script type="text/html" src="kot/template1.html" id="template1"></script> 

</head> 
<body> 
    <script> 
     $(function() { 
      loadExternalKnockoutTemplates(function() { 
       // Put your ready code here, like 
       ko.applyBindings(); 
      }); 
     }); 


     function loadExternalKnockoutTemplates(callback) { 
      var sel = 'script[src][type="text/html"]:not([loaded])'; 
      $toload = $(sel); 
      function oncomplete() { 
       this.attr('loaded', true); 
       var $not_loaded = $(sel); 
       if(!$not_loaded.length) { 
        callback(); 
       } 
      } 
      _.each($toload, function(elem) { 
       var $elem = $(elem); 
       $elem.load($elem.attr('src'), _.bind(oncomplete, $elem)); 

      }); 
     } 
    </script> 
</body>

來源

2014-04-07 01:10:29

+1

非常聰明，但我不會在你用'oncomplete.bind（$ elem）' 和 '_.each'替換'_.bind（oncomplete，$ elem）'之前用'ko.utils.arrayForEach'替代'; - ） 不需要添加下劃線 – 2014-04-14 10:16:26

相關問題

 相關問題