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

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>

您可以从路由器中看到在初始化时 this.Products 是由集合创建的

然后当调用 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);

然后在“home”路由中，调用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();
}