2

アプリのテンプレート システムにBackbone.jsと一緒にMustache.jsを使用しています。ブロック内の外部 .html ファイルにテンプレートを保存しています。各スクリプト ブロックには、jQuery.get() を使用してテンプレートを取得するために使用している一意の ID があります。<script></script>

したがって、ビューのレンダリング関数は次のようになります。

render: function(){
    $.get('templates/templates.html', function(templates) {
        try {
            var template = $(templates).filter('#tpl-MediaView').html();
            return mustache.render(template, this.model.toJSON());

            this.playlist.each(function(media) {
                var mediaView = new MediaView({model: media});
                this.$('#playlist').append(mediaView.render());
            });
        } catch(e) {
            alert(e.message);
        }
    });
}

私が問題を抱えている問題はthis.model.toJSON、$.get() の内部からアクセスすることです。外部の変数に値を代入して渡してみました。戻り値も外部で実行しようとしました。$.ajax() も使用してみました。このスコープの問題に対処する最も簡単な方法は何ですか?

- アップデート -

このコードで受け取ったエラーは次のとおりです。

未定義のメソッド「toJSON」を呼び出すことはできません

4

1 に答える 1

3

未定義のメソッド「toJSON」を呼び出すことはできません

それはthis.model未定義を返すことを意味thisします。つまり、あなたが考えていることではありません。残念ながら、これは実際にはグローバル オブジェクトです。関数参照を渡すたびに、コンテキストが失われます。

外部の変数に値を代入して渡してみました。

ありますか？正しいように聞こえ、これが通常どのように行われるか。

通常this、囲まれた関数の外のローカル変数に保存します。次に、self の代わりに関数内でそれを使用します。

render: function(){
    var self = this; // or some like "var that = this"
    $.get('templates/templates.html', function(templates) {
        //...
        self.model.toJSON()
        //...
    });
}

特定のコンテキストに対して機能することもできますがbind、これはすべてのブラウザー/ランタイムで完全にサポートされているわけではありません。

render: function(){
    $.get('templates/templates.html', function(templates) {
        //...
        this.model.toJSON()
        //...
    }.bind(this));
}

そして、ここで CoffeeScript について質問しなかったことは知っていますが、切り替えたいと思うなら、この問題に対して非常に優れた機能があります。矢印->は通常の関数を宣言しますが、太い矢印=>はバインドされた関数を宣言します。これthisは、関数の外側にあるものをすべて保持し、基本的にvar self = this目に見えないトリックを実行します。したがって、このコードは機能します。

render: ->
    $.get 'templates/templates.html', (templates) =>
        # ...
        this.model.toJSON()
        # ...
于 2012-07-20T23:39:16.587 に答える