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ファイル内の正しい場所を取得するにはどうすればよいですか？

これがURLから渡されるときに、最初のコレクションがdata.productTypeListを取得し、2番目のコレクションがdata.productTypeList[productID]を取得することがわかります。

また、ビューを有効にするjsonがロードされたときに設定されるトリガーがあります。

私はこれの構造が悪いことを知っていますが、いくつかの提案を歓迎します

すべての下位レベルのデータを含むモデルを作成し、それらを1つのコレクションに追加する必要があると思います。

モデルを作成し、getJSONコマンドを使用して、新しいProduct呼び出しに何を追加するかを正確に指定するか、コレクション内でjsonを指すURLを使用することをお勧めします。ファイル？

これがjsonファイルの例です

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

ありがとう

4

1 に答える 1

0

コレクションのfetchメソッドを上書きした理由に興味がありますか？ファイルのデータを適切に操作する必要がある場合は、Backboneの解析メソッドを使用してください。jsonファイルのサイズに応じて、jsonファイルを1回フェッチし、アプリケーションの読み込み時にオブジェクトに保存します。そこから、オブジェクトを参照し、関連するデータをコレクションに渡します。そうすれば、ビューごとにfetchを呼び出す必要がありません。データはすでにロードされているため、ビューをレンダリングするだけです。

于 2012-12-06T09:55:30.650 に答える