Question

我是Backbone的新手，我到处都试图弄清楚这一点。从根本上说，我了解模型，视图，集合和模板如何协同工作，但由于某种原因，我无法让我的集合在模板中呈现。使用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
  }
]

我正在使用的“fetch”确实显示了Firebug中提取的数据。

最后，这是我的模板：

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

我已经验证所有必要的脚本，jquery，主干，下划线等正在正确加载到页面上。

Answer 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.el / this.$el），然后渲染模板并将其根元素的内容追加到this.$el。这样我就可以在不消除元素本身的情况下获得新内容。然后，为了这个例子的目的，我测试元素是否已经在文档中，如果不是，我将它追加到#container。

Answer 2

我总是在我的函数中加载我的模板......这可能会有所帮助......

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());

无法使用backbone.js和下划线来显示模板

2 个答案: