1

私はバックボーンに本当に慣れていないので、これを理解しようとあらゆる場所を調べました。基本的に、モデル、ビュー、コレクション、およびテンプレートがどのように連携するかを理解していますが、何らかの理由でコレクションをテンプレートでレンダリングすることができません。Firebug を使用すると、「this.model is undefined」というメッセージが表示されます

これが私のコードです：

(function($) {
window.Category = Backbone.Model.extend({});

window.Categories = Backbone.Collection.extend({
    url: "src/api/index.php/categories?accounts_id=1",
    model: Category
});

window.categories = new Categories();
categories.fetch();

window.CategoriesView = Backbone.View.extend({
    initialize:function () {
        _.bindAll(this,"render");
        this.model.bind("reset", this.render);
    },

    template:_.template($('#tpl-category').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var testTargetvar = new CategoriesView({ el: $("#collection") });

})(jQuery) ;

これは、REST サービスが生成するデータです。

[
  {
    "name": "Web Design",
    "id": 0
  },
  {
    "name": "Web Development",
    "id": 0
  },
  {
    "name": "Waste Management Solutions",
    "id": 0
  }
]

私が使用している「フェッチ」は、フェッチされたデータを Firebug に表示します。

最後に、これが私のテンプレートです。

<div id="collection"></div>
<!-- Templates -->
<script type="text/template" id="tpl-category">
<span><%=name%></span>
</script>

必要なすべてのスクリプト、jquery、バックボーン、アンダースコアなどがページに正しく読み込まれていることを確認しました。

4

2 に答える 2

1

modelビューオブジェクトのプロパティをどこに設定しているのかわかりません。ビューコンストラクターは、カテゴリーのコレクション（#collectionセレクターによって提案される）を表すのか、単一のカテゴリー（テンプレートとmodelプロパティの使用によって提案される）を表すのかについても混乱しているようです。これは、完全なソリューションへのガイドに役立つ実用的な例です。

http://jsfiddle.net/RAF9S/1/

( function ( $ ) {

  var Category = Backbone.Model.extend( {} );

  var Categories = Backbone.Collection.extend( {

    url : "src/api/index.php/categories?accounts_id=1",

    model : Category

  } );


  var categories = new Categories( [

    { name : "One" },

    { name : "Two" },

    { name : "Three" }

  ] );


  var CategoryView = Backbone.View.extend( {

    initialize : function () {

      _.bindAll( this,"render" );

      this.model.bind( "reset", this.render );

    },


    template : _.template( $( '#tpl-category' ).html() ),


    render : function ( eventName ) {

      this.$el.empty().append(

        $( this.template( this.model.toJSON() ) ).html()

      );


      if ( ! this.el.parentNode ) {

        $( "#collection" ).append( this.el );

      }


      return this;

    }
    // render

  } );


  var view, views = {};

  categories.each( function ( category ) {

    view = new CategoryView( {

      tagName : 'span',

      model : category

    } );


    view.render();

    views[ category.id ] = view;

  } );

} )( jQuery );

fetchこの場合、メソッドの代わりに、コレクションにいくつかのモデルを手動で入力しただけです。ご覧のとおり、各モデルのビューをインスタンス化し、モデルオブジェクトをmodelプロパティとして渡します。

このメソッドでは、ビュー要素（ / ）renderを空にしてから、テンプレートをレンダリングし、そのルート要素のコンテンツをに追加します。そのため、要素自体を消去せずに新しいコンテンツを取得します。次に、この例では、要素がすでにドキュメントに含まれているかどうかをテストし、含まれていない場合はに追加します。this.elthis.$elthis.$el#container

于 2012-04-30T15:10:37.830 に答える
0

私はいつも自分の関数にテンプレートをロードしています...それが役立つかもしれません..

initialize: function(){
  _.bindAll(this, 'render');
  this.template = _.template($('#frame-template').html());
  this.collection.bind('reset', this.render);
},
render: function(){
  var $stages,
    collection = this.collection;
  this.template = _.template($('#frame-template').html());
于 2012-04-30T14:36:23.900 に答える