0

I am using mustache within a jquery widget calling external json/template. My Jquery seems fine. however mutstache is giving me a error. Script as follows:

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
4

3 回答 3

2

当我不小心切换了模板字符串和对象参数时，我遇到了这个问题。它应该是：Mustache.render("{{name}} template works like this", { name: "Mustache" });

于 2014-04-15T01:36:12.273 回答
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 对象上渲染有效。

于 2013-05-31T08:07:18.907 回答
0

我在 Firefox 中遇到了这个错误，但奇怪的是 Chrome 没有。原来这是由于模板数据False在运行时mustache.render()。

事实证明，该项目已经有代码来满足其他人编写的代码，我在费了很大力气之后发现允许其他组件检查何时加载模板：

html模板.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;
}

我的对象.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);
}
于 2013-04-16T10:18:03.283 回答