2013-01-21 30 views
0

我在jQuery小部件中使用鬍子調用外部json /模板。我的jquery看起來很好。然而mutstache給我一個錯誤。 腳本如下:鬍子和jQuery的錯誤?

TypeError: this.tail.search is not a function
[Break On This Error]

var match, pos = this.tail.search(re); 

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load LAB Js *********/ 

    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src", 
     "js/LAB.min.js");//local 
    if (script_tag.readyState) { 
     script_tag.onreadystatechange = function() { // For old versions of IE 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
       scriptLoadHandler(); 
      } 
     }; 
    } else { // Other browsers 
     script_tag.onload = scriptLoadHandler; 
    } 
    // Try to find the head, otherwise default to the documentElement 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 

/******** Load js as required ******/ 
function scriptLoadHandler() { 
    var labjs = $LAB 
    .script('http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js').wait() 
    .script('js/mustache.js').wait();//local 
    labjs.wait(function(){ 
     main(); 
    }); 
} 

/******** main function ********/ 
function main() { 
    jQuery = window.jQuery.noConflict(true); 

    jQuery(document).ready(function($) { 

     function jsonHandler(data){ 
      $.get('templates/template.html',function(template){ 
       console.log(data); 
       console.log(template); 
       var htmlRenderer = Mustache.to_html(template,data); 
      }); 
     } 

     $.getJSON('json/data.json',jsonHandler);     




    }); 
    //alert('end'); 
}//main() done 

})();//function done 
+0

這是瀏覽器使用? –

回答

0

我在Firefox收到此錯誤,但奇怪的是沒有鉻。事實證明,這是由於運行mustache.render()時模板數據爲False

原來的項目已經有代碼來滿足這種由別人,我的痛苦後發現,讓其他組件來檢查寫入時的模板被加載:

htmltemplate.js:

function HTMLTemplate(location) 
{ 
    this.template = null; 
    var self = this; 
    $.get(staticURL+location, function(data) 
    { 
     self.template = data; 
    }); 

} 

HTMLTemplate.prototype.getTemplate = function() 
{ 
    if(this.template) 
    { 
     return this.template 
    } 
    else 
    { 
     return false; 
    } 
} 

mediabootstrap.js:

var MediaBootstrap = {}; 
MediaBootstrap.templates = {}; 
MediaBootstrap.init = function() 
{ 
    this.templates.mytemplate = new HTMLTemplate('js/templates/mytemplate.html'); 
} 

MediaBootstrap.templatesLoaded = function() 
{ 
    var loaded = true; 
    for(key in this.templates) 
    { 
     if(!this.templates[key].getTemplate()) 
     { 
      loaded = false; 
      break; 
     } 
    } 
    return loaded; 
} 

myobject.js:

MyObject.buildOptions = function(data) 
{ 
    if(!MediaBootstrap.templatesLoaded()) 
    { 
     setTimeout(function(){ 
      MyObject.buildOptions(data); 
     }, 100); 
     return; 
    } 
    var tpl = MediaBootstrap.templates.mytemplate.getTemplate(); 
    var html = Mustache.render(tpl, data); 
    this.element.find('div.container').html(html); 
} 
+0

我真的不明白爲什麼Chrome沒有這個工作,也許它更快速地加載模板更有效? – DanH

1

剛剛有與jquery 1.8.x相同的問題。我通過將html模板呈現爲字符串而不是html對象來解決它。使用dataType:'text',您將獲得一個乾淨的字符串,其中包含模板的html內容。渲染引擎可以正常工作。
與測試:Firefox和Chrome

$.ajax({ 
     type: 'GET', 
     url: './htmlTemplates/conferenceMembers.htpl', 
     dataType: 'text', 
     success: function (data) { 
      $(divId).append(Mustache.render(data, htmlRenderValues)); 
     } 
    }); 

注:這個問題已經一去不復返了使用jQuery 2.0.1。在html對象上渲染。

+0

爲簡單起見,我幾乎全部使用'$ .get'而不是'$ .ajax'(正如他的問題中的原始提問者所做的那樣)。因此,我發現在'$ .get('./ htmlTemplates/conferenceMembers.htpl',函數(數據){...},'文本')中添加''text''參數更方便; – Pere

2

我有這個問題,當我不小心切換模板字符串和對象參數。 它應該是:Mustache.render("{{name}} template works like this", { name: "Mustache" });