2

http://ricostacruz.com/backbone-patterns/#inline_templatesに従ってhttp://ricostacruz.com/backbone-patterns/#inline_templatesを回避しようとしましたが、次のような典型的なビューがあります。

// in app.js
App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: _.template($("#myTemplate").html()),
    render: function() 
    {
        this.$el.html(this.template(this.model.toJSON()));
    }

次に、このようにapp.jsを含めるだけです

<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/underscore.js"></script>
<script src="./js/backbone.js"></script>
<script src="./js/app.js"></script>

ブラウザーは$("#myTemplate")、App.MyView.template の行がnull(ドキュメントの準備ができていないため?) であると不平を言います。何をすればよいでしょうか？

4

3 に答える 3

2

テンプレートを遅延ロードしてみませんか? 最初の使用時にテンプレートをコンパイルし、コンパイルされたテンプレートをビューの「クラス」にキャッシュします。ベースビューを追加して、このキャッシュを次のように処理することもできます。

var BV = Backbone.View.extend({
    template: function(data) {
        if(!this.constructor.prototype._template)
            this.constructor.prototype._template = _.template($('#' + this.tmpl_id).html());
        return this._template(data);
    }
});

次に、次のようなものがあります。

var V = BV.extend({
    tmpl_id: 'tmpl',
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

テンプレートは、#tmpl最初に使用されたときにコンパイルされ、多くても 1 回コンパイルされます。

デモ: http://jsfiddle.net/ambiguous/hrnqC/

デモのラップ (頭) がないことに注意してください。コンソールを見て、何がコンパイルされているか、どのくらいの頻度でコンパイルされているかを確認してください。

于 2012-05-30T21:16:08.477 に答える
1

これに対する私の簡単な修正は、ビューの初期化時にテンプレートをコンパイルすることでした。

App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: '#myTemplate',
    initialize: function(){
        this.template = _.template($(this.template).html());
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    }

そうすれば、他のすべては同じように機能し、renderメソッドを基本クラスに入れることができます。

于 2012-05-31T03:25:59.267 に答える
0

最も簡単な方法は、テンプレートをキャッシュしないことです。

App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    render: function() 
    {
        var template = _.template($("#myTemplate").html())
        this.$el.html(template(this.model.toJSON()));
    }
于 2012-05-30T20:24:19.057 に答える