0

そこで、最新のバックボーン/アンダースコア バージョンに関連する変更をチェックしています。以前は、BB 0.5.2 とアンダースコア 1.1.7 で実行されているプロジェクトがあります。新しいバージョンのビュー内でテンプレート プロパティを定義することに関して奇妙なことに気付きました。これにより、アップグレードを進めるのを躊躇します。

私の現在のバージョンでは、ビューを次のように定義します。

var MyView = Backbone.View.extend({
  template: _.template($('#exampleTemplate').html()),
  initialize: function() {...},
  render: function() { $(this.el).html(this.template(someObjectParam)); },
});

ただし、単純化された todo クローンの試行を例として使用して、同じ方法で作業しようとすると、次のようにインライン スクリプト テンプレートを使用して html をセットアップします。

<script>
  $(document).ready(function() {
    app.init();
  });
</script>

<script type="text/template" id="itemViewTemplate">
  <div class="item">
    <input type="checkbox" name="isComplete" value="<%= item.value %>"/>
    <span class="description"><%= item.description %></span>
  </div>
</script>

含まれているJSファイルには次のものがあります。

var ItemView = Backbone.View.extend({   
  el: 'body',

  // Below causes error in underscore template, as the jquery object .html() call
  // returns null.  Commenting will allow script to work as expected.
  templateProp: _.template($('#itemViewTemplate').html()),  

  initialize: function() {
    // Same call to retrieve template html, returns expected template content.
    console.log($('#itemViewTemplate').html());  

    // Defining view template property inside here and calling it, 
    // properly renders.
    this.template = _.template($('#itemViewTemplate').html());
    this.$el.html(this.template({item: {value: 1, description: 'Something'}}));
  },
});

var app = {
  init: function() {
    console.log('Fire up the app');
    var itemView = new ItemView();
  }
}

したがって、テンプレート プロパティを定義すると、テンプレート html を取得する呼び出しが null 値を返すようになり、アンダースコア テンプレート オブジェクトを定義しようとする試みが中断される理由について、私は混乱しています (一口)。ただし、定義が初期化関数内で行われる場合、テンプレート html を取得するための呼び出しは適切にテンプレートを見つけるので、その内容をアンダースコア テンプレートに渡すことができます。私が潜在的に見逃しているものを見た人はいますか？

前もって感謝します！

4

1 に答える 1

3

この場合:

var ItemView = Backbone.View.extend({   
  //...
  templateProp: _.template($('#itemViewTemplate').html()),
  //...
});

is が原因で失敗して$('#itemViewTemplate').html()いる場合、単純なタイミングの問題があります: のコンテンツが存在する前にnull読み取ろうとしています。#itemViewTemplate古いバージョンでもまったく同じ問題が発生するはずです。

すべてが正しい順序でロードされていることを確認するか (つまり、テンプレートの後<script>にビューが読み込まれるようにするか)、ビューの .xml でテンプレートをコンパイルしますinitialize。templatePropビューでを確認し、prototype必要に応じて最初の使用時にのみコンパイルできます。

initialize: function() {
    if(!this.constructor.prototype.template)
        this.constructor.prototype.template = _.template($('#itemViewTemplate').html());
    //...
}

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

于 2012-07-25T21:17:22.473 に答える