6

ここに示すように、アンダースコアテンプレートで関数を使用しようとしていますが、エラーが発生します。

Uncaught ReferenceError：getPropertyが定義されていません

以下は私が使用しているコードです

var CustomerDetailView = Backbone.View.extend({
    tagName : "div",
    template: "#customer-detail-view-template",

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.initializeTemplate();
    },

    initializeTemplate: function() {
        this.template = _.template($(this.template).html());
    },

    render: function() {
        var data = this.model.toJSON();
        _.extend(data, viewHelper);
        console.log(data);
        var html = _.template($(this.template), data);
        $(this.el).html(html);
        return this;
    }
})

そしてテンプレート：

 <script type="text/template" id="customer-detail-view-template">
    <div style="height: 70px;">
        <span class="displayText">
            <p class="searchResultsAuxInfo">Full Name : <%= getProperty("full_name", null) %> </p>
            <p class="searchResultsAuxInfo">Country Code : <%= getProperty("country_code", null) %></p>
            <p class="searchResultsAuxInfo">street : <%= getProperty("street", null) %></p>
            <p class="searchResultsAuxInfo">maiden_name : <%= getProperty("maiden_name", null) %></p>
        </span>
        <span class="displayTextRight">
            <p class="searchResultsAuxInfo">marital_status_code : <%= getProperty("marital_status_code", null) %></p>
            <p class="searchResultsAuxInfo">tax_id_number : <%= getProperty("tax_id_number", null) %></p>
            <p class="searchResultsAuxInfo">primary_phone : <%= getProperty("primary_phone", null) %></p>
            <p class="searchResultsAuxInfo">customer_number : <%= getProperty("customer_number", null) %></p>
        </span>
    </div>
</script>

ビューヘルパーオブジェクトは次のようになります。

var viewHelper = {
    getProperty:function(propertyName, object) {
        if(typeof(object) === "undefined"){
            object = this["attributes"];
        }
        for (i in object) {
            if (_.isObject(object[i])) {
                var currentObj = object[i];
                if(_.has(currentObj, propertyName)){
                    return currentObj[propertyName];
                }
                this.getProperty(propertyName, currentObj);
            }
        }
    }
}
4

2 に答える 2

13

あなたの問題は、あなたが中renderにいることですthis.template：

var html = _.template($(this.template), data);

すでにコンパイル済みのテンプレート関数です:

initializeTemplate: function() {
    this.template = _.template($(this.template).html());
}

_.template呼び出し:

JavaScript テンプレートをレンダリング用に評価できる関数にコンパイルします。

だからあなたはこれを言っています：

_.template($(some_compiled_template_function).html(), data);
//           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

これは、次の$(function() { ... })形式を実行し$()ています。

DOM の読み込みが完了したときに実行される関数をバインドします。

そのちょっとした混乱がすべてを混乱させ、カオスに満ちています。テンプレートの使用方法を修正すると、物事がより理にかなったものになります。

render: function() {
    //...
    var html = this.template(data);
    //...
}

あなたthis.templateは内部の関数になるrenderので、関数として呼び出します。

デモ (わかりやすくするためにいくつか簡略化しています): http://jsfiddle.net/ambiguous/SgEzH/

于 2012-05-01T18:54:34.697 に答える
0

参考にしたブログ記事によると、

この行を削除するだけで機能します: "this.initializeTemplate();"

于 2012-11-02T06:52:55.670 に答える