0

だから私は非常にシンプルなアプリをまとめていて、少し行き詰まっています。

これまでのところ、ルーターがあります

 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>

ルーターから、これを初期化するとわかります。製品はコレクションから作成されます。

次に、homeが呼び出されると、ビューが実行されます。

コレクションからビューに何も渡されないと思いますが、これがどのように行われるのかわかりませんか？コレクションの設定が間違っていますか？--fetchを呼び出して、それをビューに渡す必要がありますか？

どんな助けでも大歓迎です

ありがとう

4

1 に答える 1

0

fetchを呼び出して、それをビューに渡す必要がありますか？

fetchを呼び出し、その成功コールバックトリガーを持っている必要がありますview.render。successJQuery呼び出しのオプションを使用してそれを行うことができます。または、通常は呼び出す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);

次に、「ホーム」ルートで、コールバック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();
}
于 2012-12-06T06:22:44.137 に答える