Question

所以我正在整理一个非常简单的应用程序并且有点卡住了。

到目前为止，我有我的路由器

 var AppRouter = Backbone.Router.extend({

routes:{
    "":"home"
},

initialize:function () {
    // Handle back button throughout the application
    $('.back').live('click', function(event) {
        window.history.back();
        return false;
    });
    this.firstPage = true;
    this.products = new Products();

},

home:function () {
    var view = new HomeView({collection:this.products});

// render the view when the collection is loaded
this.products.on("renderCompleted:Products", function() {

    //alert("ff");
    view.render();
});



// fetch should trigger "reset" when complete
this.products.fetch();
}

我的模特

var Product=Backbone.Model.extend({
    defaults:{
        id:"",
        name:'',
        longName:'',
        productID:''
    }
});

return Product;

我的收藏

   var Products=Backbone.Collection.extend({

      // Book is the model of the collection
      model:Product,

      fetch:function(){
        var self=this;
        var tmpItem;
        //fetch the data using ajax

          var jqxhr = $.getJSON("data/product.json")
          .success(function(data, status, xhr) { 

            $.each(data.data.productTypeList, function(i,item){


              tmpItem=new Product({id:item.id,name:item.name,longName:item.longName, productID:i});
              self.add(tmpItem);

            });

            self.trigger("fetchCompleted:Products");

          })

      }

});

return Products;

和我的观点

var HomeView = Backbone.View.extend（{

template: _.template(homeViewTemplate),

    render:function (eventName) {
    //$(this.el).html(this.template());

     this.$el.empty();
  //compile template using the data fetched by collection
  this.$el.append(this.template({data:this.collection.toJSON()}));

  console.log("test" + this.collection.get('data'));

    return this;
}

homeViewTemplate调用具有此HTML

  <ul >
           <% for (var i = 0; i < data.length; i++) { %>
                  <% var item = data[i]; %>
                  <li>
                    <a href="#products/list/<%= item.productID%>"><%= item.longName %></a>
                  </li>
            <% } %>
    </ul>

你可以从路由器上看到，在init上，这个产品是由集合

创建的

然后当调用home时，它会运行视图。

我不认为有什么东西从集合传递到视图，我不知道这是怎么做到的？我的收藏设置错了吗？ - 我是否必须调用fetch并将其传递给视图？

感谢任何帮助

感谢

Answer 1

我是否必须调用fetch并将其传递给视图？

您必须调用fetch，并使其成功回调触发器view.render。你可以使用JQuery调用的success选项来做到这一点;或使用reset通常调用的collection.fetch事件。我建议将collection.reset放入您的自定义fetch：

// get the data an an array of models
var models = data.data.productTypeList.map(function(item) {
    return new Product({id:item.id,name:item.name,longName:item.longName, productID:i});
});

// populate the collection
self.reset(models);

然后在＆＃34; home＆＃34;路由，呼叫fetch，然后在回调上呼叫render：

home:function () {
    var view = new HomeView({collection:this.products});

    // render the view when the collection is loaded
    this.products.on("reset", function() {
        view.render();
    });

    // fetch should trigger "reset" when complete
    this.products.fetch();
}

骨干结构/集合/视图传递和返回数据

1 个答案: