【问题标题】:Mustache.js Object #<Document> has no method 'search'Mustache.js 对象 #<Document> 没有方法“搜索”
【发布时间】:2012-12-22 16:42:06
【问题描述】:

我使用 mustache.js 作为我的客户端模板解决方案,但我遇到了一个我不知道为什么会发生这种情况的问题:

首先,这是我的模板:

<ul>
    {{#steps}}
    <li>
        <a href="{{url}}">
            <div class="step_visual {{step_status}}">
                <span class="step_description">{{description}}</span>
            </div>
        </a>
    </li>
    {{/steps}}
</ul>

这是我试图传入的 json 对象:

var view = {
    "steps": [
        {
            "url": "complete_profile",
            "step_status": "done",
            "description": "Complete Proflie"
        },
        {
            "url": "complete_form1",
            "step_status": "active",
            "description": "Submission of Form 1"
        }
    ]
}

我尝试运行此脚本以在我的应用中呈现它

var content = Mustache.render(template, view);
$(target).html(content).hide().fadeIn();

其中template = 上面的模板 | view = 视图对象 而target 是我希望更改内容的html元素

让我感到困惑的是,当我的模板看起来像这样时它运行良好

{{#steps}}
    {{url}}
    {{description}}
    {{step_status}}
{{/steps}}

或者如果我的模板没有任何可循环的内容。

可能是什么错误?你认为这是胡须虫吗?

编辑 正如我所看到的代码有效,

会不会是我调用函数的方式有问题?

tmplReplaceContent : function(json, tmpl, target) {
    var regex = new RegExp("\{{[a-zA-Z\.\_]*\}}"),
    view = '';
    function setOutput(template) {
        var content = Mustache.render(template, view);
        $(target).html(content).hide().fadeIn();
    }
    function doJSON(json) {
        view = json;
        if(!regex.test(tmpl)){
            /* get mustache tmpl from the path */
            $.get(msi.vars.tmpl_url + tmpl + '.mustache', setOutput);
        } else {
            setOutput(tmpl);
        }
    }
    /* json -> check if object */
    if (typeof json === 'object') {
        doJSON(json);
    } else {
        /* getJSON from the path */
        $.getJSON(msi.vars.base_url + json, doJSON);
    }
}

【问题讨论】:

  • 您的代码有效,您的错误在其他地方。 jsfiddle.net/KzEEV
  • 是的,我也这么认为,我也在这里测试过:mustache.github.com/#demo。 .我更新了问题,添加了一些可能是错误来源的代码。
  • 我会以不同的方式实现tmplReplaceContent 函数,但它看起来对我来说并不太可疑。使用 Chrome 进行调试可能是个好主意。将其设置为“暂停未捕获的异常”并检查调用树和范围变量以了解发生了什么。
  • 我试过了,但我不知道我应该如何检查它,我在范围变量上发现了一个异常,本地,看起来像arguments: Array[2] 0: "search" 1: #document length: 2 __proto__: Array[0] get message: function () { [native code] } get stack: function () { [native code] } set message: function () { [native code] } set stack: function () { [native code] } type: "undefined_method" __proto__: Error
  • 在做了几次测试后,我发现这是关于胡子引擎的问题,当模板文件来自外部文件时会抛出错误。我找不到解决办法,我正在考虑将外部文件的内容保存到一个变量中,然后使用它。但我不知道怎么做。

标签: javascript template-engine mustache


【解决方案1】:

我从来没有这种轻松的感觉,因为我自己解决了我的问题,首先感谢Tomalak一直关注我的cmets并帮助我解决问题。

如果我继续处理 console.logging 事情,我本可以早点解决问题,但我停了下来。

我注意到的一件事是$.get 函数给了我#&lt;Document&gt;,这几乎是一个对象,我可以早点推断出响应是一个对象,从我的问题的标题中可以看出它显然是返回一个对象。

那么为什么不添加dataType 属性呢?

function doJSON(data){
    dataSource = data;
    if (!regex.test(tpl)) {
        $.get(msi.vars.tmpl_url + tpl + '.mustache', render, 'text'); // see here
    } else {
        render(tpl);
    }
}

这最终解决了问题。

【讨论】:

  • 非常好的工作。 +1 - 您可以(并且可能应该)通过将*.mustache 文件发送为Content-Type: text/plain 在服务器端解决此问题。这样您就不需要更改.get() 请求。我还设置了一个示例性解决方案,利用 jQuery 的Deferred 来解决同步两个异步任务(获取 JSON 和模板)的问题:pastebin.com/hrFYGk5T。我的第一个怀疑是你会有时间问题,但很快就清楚事实并非如此。也许你可以利用它/学习一些新东西。
  • 哇哦!!你真的付出了一些努力,谢谢!极好的!!我几乎看不懂你给我的代码,也许是bec。我还不知道。我会把它加入书签并尝试一下,这样我就可以理解了。谢谢!!
  • @Salac Deferred 的概念非常有用,也不太难。如果您不将它用于此项目,那么下次您肯定会发现它很有帮助。
猜你喜欢
  • 2019-12-19
  • 1970-01-01
  • 2022-09-23
  • 2022-12-21
  • 1970-01-01
  • 2011-11-18
  • 1970-01-01
  • 2018-10-21
  • 2011-06-06
相关资源
最近更新 更多