3

クライアント側のテンプレートソリューションとして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);
    }
}
4

1 に答える 1

5

私は自分で質問を解決したので、この安心感を感じたことはありませんでした。最初に、コメントを継続的に監視して問題を解決するのを手伝ってくれたTomalakに感謝します。

console.loggingを続行すれば、以前に問題を解決できたはずですが、停止しました。

私が気づいたことの1つは、$.get関数が私#<Document>に与えることです。これはほとんどオブジェクトです。質問のタイトルから、明らかにオブジェクトを返していることから、応答がオブジェクトであると以前に推測できたはずです。

dataTypeでは、属性を追加してみませんか？

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

そしてそれは最終的に問題を解決しました。

于 2012-12-23T10:58:59.860 に答える