1

我对 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
  }
]

我正在使用的“获取”确实显示了 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.el/ this.$el)，然后渲染模板并将其根元素的内容附加到this.$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 回答