jQuery的加載內容到Firefox的腳本標記

我有一個使用jQuery 1.7.2的HTML頁面。在頁面內，我有一個像這樣的腳本標籤。jQuery的加載內容到Firefox的腳本標記

<script id="navigation-template" type="text/x-handlebars-template"></script>

再往下我使用javascript使用下面的函數來加載我的車把模板到腳本標籤頁：

loadTemplate: function(templateId, elementId) { 
    if (!elementId) { 
     elementId = templateId; 
    } 
    $('#'+elementId).load('/my/path/templates.html #'+templateId); 
    }

這在鉻做工精細，月食瀏覽器，甚至IE 9，但似乎在Firefox中南下。

我已調試並且加載調用成功完成並返回內容，但$('#navigation-template').html()的調用給出了一個空字符串。

我也在腳本標記中有內容，並調用負載，並在調用.load後看到它被替換爲空字符串。

最後，如果我手動執行$('#navigation-template').html("hello");，我發現腳本標記的.html()已更改。

如果我去一個簡單的ajax得到然後我將不得不解析它並得到給定的元素，而不是依靠加載來獲取我的元素。

如何在firefox中解決這個問題？

來源

2013-08-20 digitaljoel

爲什麼你需要把它放到script標籤，你就不能編譯模板一旦你得到它從ajax（負載）？ – dezman

人。我會研究這一點。將它放入腳本標籤的好處是我可以使用'load（）'函數，並且完成了所有的工作，然後當我想稍後應用模板時，我就可以。爲了現在編譯它，我必須加載它有點不同（提供一個成功處理程序來手動加載和處理它），但這可能是答案... – digitaljoel

@Watson感謝您指出明顯的解決方案。我偶爾只有javascript，所以有時我需要。把你的評論作爲答案，我會接受它。 – digitaljoel

這裏是我使用上述目的使用該功能：

Util.loadTemplates = function(ExternalTemplates) { 
    $.each(ExternalTemplates, function(index, value){ 
     var scriptUrl = value; 
     $.ajax({ 
      url: scriptUrl, 
      dataType: 'text', 
      success: function(res){ 
       var templateName = value.slice(value.lastIndexOf('/') + 1, value.lastIndexOf('.')); 
       TEMPLATES[templateName] = Handlebars.compile(res); 
      } 
     }); 
    }); 
} 

var ExternalTemplates = [ 
    'templates/application.hbs', 
    'templates/people.hbs' 
];

但它是更好地研究編譯，在將頁面發送到客戶端之前將模板轉換爲函數。

來源

2013-08-26 23:02:20 dezman

謝謝。我來到了一個類似的解決方案。我會發布我的解決方案，但我仍然會接受你的回答，因爲它指向了正確的方向。 – digitaljoel

您正在使用的類型，因爲這

<script id="navigation-template" type="text/x-handlebars-template"></script>

嘗試改變類型

<script id="navigation-template" type="text/javascript"></script>

來源

2013-08-20 04:54:39

我沒有加載JavaScript，我正在加載用作句柄模板的html內容，所以類型是正確的。 – digitaljoel

我喜歡load()的一件事是我可以將所有模板存儲在單個文件中，並使用load爲我感興趣的模板選擇div。我編寫了一個方法來加載模板文件並存儲模板映射到模板名稱映射到模板源和編譯模板。我在第一次訪問時編譯模板，以便我不必每次都不必要地編譯所有模板，但只在需要時編譯我需要的模板。它看起來是這樣的：

var myTemplateHelperThingy = { 
    loadTemplates: function() { 
    $.get('/my/path/templates.html') 
     .done(function(data) { 
     var elements = $(data); 
     $('div.template-marker-class', elements).each(function(index, element) { 
      // need to use element instead of 'this' because IE is st00pid. 
      var content = $(element)[0].outerHTML; // trick from StackOverflow 
      myAppObject.pageTemplates[this.id] = { 
      source: content, 
      template: null 
      }; 
     }); 
    }); 
    }, 
    getTemplate: function(name) { 
    // get a compiled template, compiling it if necessary. 
    var result = myAppObject.pageTemplates[name].template; 
    if (!result) { 
     myAppObject.pageTemplates[name].template = Handlebars.compile(myAppObject.pageTemplates[name].source); 
    } 
    return myAppObject.pageTemplates[name].template; 
    }, 
    evalTemplate: function(data, templateName) { 
    var template = myAppObject.getTemplate(templateName); 
    if (template) { 
     return template(data); 
    } 
    else { 
     // message to user here that something went wrong. 
    } 
    }, 
    showTemplate: function(targetElement, data, templateName) { 
    $(targetElement).html(bi.evalTemplate(data, templateName)); 
    } 
}

而且templates.html樣子：

<html> 
<body> 
<div id="templates-wrapper-do-not-remove-or-jquery-will-not-find-the-templates"> 
    <div id="my-first-template" class="template-marker-class other-class"> 
    <!-- a bunch of content --> 
    </div> 
    <div id="my-second-template" class="template-marker-class another-class"> 
    <!-- more content --> 
    </div> 
</div> 
</body> 
</html>

來源

2013-08-27 03:27:34 digitaljoel

jQuery的加載內容到Firefox的腳本標記

回答

相關問題