0

目前我有一个读取 json 文件的基本应用程序。

到目前为止我构建这个的方式是

我有一个调用不同功能的路由器

routes: {

        'products/productList' : 'showProducts',
        'products/list/:productID' : 'showProductsList',
        'products/view/:productID/:productTypeID' : 'showProductsView'

}

showProducts:function(){

 var productList=new Products();
 var productListView=new ProductListView({collection:productList});
 productListView.bind('renderCompleted:Products',this.changePage,this);

 productListView.update();

}

showProductsList:function(productID){

 var productTypeList=new ProductTypeCollection();
 var productTypeListView=new ProductTypeListView({collection:productTypeList});
 productTypeListView.bind('renderCompleted:ProductsType',this.changePage,this);
 productTypeListView.update(productID);
}

所以我为产品创建了一个模型

var Product=Backbone.Model.extend({

    defaults:{
        id:"",
        name:'',
        longName:'',
        productID:''
    }
});

return Product;

和它的收藏

var Products=Backbone.Collection.extend({
 model:Product,

 fetch:function(){
        var self=this;
        var tmpItem;

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

            });
            //dispatch customized event
            self.trigger("fetchCompleted:Products");
          })
          .error(function() { alert("error"); })
          .complete(function() {
                console.log("fetch complete + " + this);
          });             
      }
});

return Products;

然后是产品类型的模型

var ProductType=Backbone.Model.extend({
//default attributes 
    defaults:{
        id:"",
        name:'',
        productID:'',
        productTypeID:''
    }
});

return ProductType;

拥有自己的收藏

var ProductsType=Backbone.Collection.extend({
 model:ProductType,

 fetch:function(){
        var self=this;
        var tmpItem;

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

            });
            //dispatch customized event
            self.trigger("fetchCompleted:ProductsType");
          })
          .error(function() { alert("error"); })
          .complete(function() {
                console.log("fetch complete + " + this);
          });             
      }
});

return ProductsType;

这些人各有各的看法

  var ProductListView = Backbone.View.extend({

template: _.template(productViewTemplate),

update:function(){
  //set callback of the event "fetchCompleted:Products" 
  this.collection.bind('fetchCompleted:Products',this.render,this);
  this.collection.fetch();
},

render: function(){
  this.$el.empty();
  //compile template using the data fetched by collection
  this.$el.append(this.template({data:this.collection.toJSON()}));
  this.trigger("renderCompleted:Products",this);
  return this;
}
});

return ProductListView;

和 productType 视图

var ProductListTypeView = Backbone.View.extend({

template: _.template(productViewTypeTemplate),

update:function(productID){
  //set callback of the event "fetchCompleted:Products" 
  this.collection.bind('fetchCompleted:ProductsType',this.render,this);
  this.collection.fetch(productID);
},

render: function(){
  this.$el.empty();
  //compile template using the data fetched by collection
  this.$el.append(this.template({data:this.collection.toJSON()}));
  this.trigger("renderCompleted:ProductsType",this);

  return this;
}
});

return ProductListTypeView;

显然，多次加载同一个 json 文件很疯狂，因为这会减慢应用程序的速度，但我想知道如何在 JSON 文件中找到正确的位置

您可以看到第一个集合获取 data.productTypeList 而第二个集合获取 data.productTypeList[productID] 因为这是从 url 传入的。

当 json 加载时，还设置了触发器来启用视图。

我知道它的结构很糟糕，但欢迎提出一些建议

我猜我需要制作一个包含所有较低级别数据的模型，并将它们添加到一个集合中。

这是最好使用 thge 技术吗？文件？

这是一个json文件的例子

http://demo.stg.brightonconsulting.net.au/templates/tests/backboneJQMProducts/data/product.json

谢谢

4

1 回答 1

0

好奇为什么你在你的收藏中重写了 fetch 方法？如果需要对文件中的数据进行相应的操作，只需使用 Backbone 的parse方法。根据您的 json 文件的大小，我将获取 json 文件一次并将其存储在应用程序加载的对象中。从那里我将引用该对象并将相关数据传递到我的集合中。这样，您不必在每个视图上调用 fetch。只需渲染视图，因为您的数据已经加载。

于 2012-12-06T09:55:30.650 回答