製品の一覧からクリックしたときに製品の詳細を表示するには

Question

サーバー側のRuby on Railsでbackbone.jsアプリケーションを構築しようとしています。

私は製品のリストを取得することができ、それは素晴らしいです。

次のタスクは、ユーザーが製品をクリックしたときに製品の詳細を表示することです。私のコードに従って製品をクリックすると、「/products/20.json」という警告メッセージが表示されます。

質問：jQueryを使用してajax呼び出しを手動で行う必要がありますか、またはbackbone.jsがBackbone.jsがRESTに準拠しているため、この製品の価値を知る手助けをしてください。

$(function(){ 

    window.Product = Backbone.Model.extend({ 
    defaults: { name: 'name missing' }, 
    urlRoot: '/product' 
    }); 

    window.ProductList = Backbone.Collection.extend({ 
    model: Product, 
    url: '/products.json' 
    }); 

    window.ProductViewForListing = Backbone.View.extend({ 
    initialize: function() { 
     this.template = $('#productTmplForListing').template(), 
     _.bindAll(this, 'render'); 
    }, 
    className: 'product', 
    render: function(){ 
     var fragment = $.tmpl(this.template, this.model.toJSON()); 
     $(this.el).html(fragment); 
     return this; 
    } 
    }); 

    window.ProductViewForShow = Backbone.View.extend({ 
    el: $('#main'), 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    render: function(){ 
     self.el.append($('Hello world')); 
    } 
    }); 

    window.AppView = Backbone.View.extend({ 
    el: $('#products'), 
    events: { 
     "click .product": "showProduct" 
    }, 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    render: function(){ 
     var self = this; 
     this.collection.each(function(product){ 
     var view = new ProductViewForListing({model: product}); 
     self.el.append(view.render().el); 
     }); 
    }, 
    showProduct: function(e){ 
        console.log(e); 
     var href = $(e.target).closest('.product').find('a').attr('href'); 
     alert(href); 
    } 
    }); 

    var products = new ProductList(); 
    products.fetch({ 
    success: function() { 
     new AppView({ collection: products }); 
    } 
    }); 

}); 




<script type="text/x-jquery-tmpl" id="productTmplForListing"> 
    <a href="/products/${id}.json"> 
    <img alt="${name}" class="productImage" height="190" src="/system/pictures/${id}/thumbnail/${picture_file_name}" width="190" /> 
    </a> 
    <p class="productName"> 
     <a href="/products/${id}.json"> 
     ${name} 
     </a> 
    </p> 
    <p class="productPrice"> 
     ${price} 
    </p> 
    </script> 

Answer 1

あなたproductsコレクション、fetchを呼び出した後、あなたのレール製品コントローラのindexアクションのようなものに見えると仮定して、完全に形成された製品モデルの配列を持っている必要があります。つまり

def index 
    products = Product.all 
    render :json => products 
end 

を、製品あなたがProductViewListingに渡すモデルは、すでに完全に記憶されています。テンプレート内のid属性にのみアクセスしているだけです。

あなたの質問に対する答えは、いいえ、手作業でajax呼び出しを行う必要はありません。これは、すべてのモデルの情報が既に商品コレクションに入っているからです。