如何显示从产品列表中单击时的产品详细信息

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后，应该有完全形成产品型号的阵列，假设你的钢轨产品控制器指数动作看起来是这样的：

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

换句话说，产品模型，你传递给你的ProductViewListing已经完全在内存中。恰好你只是在模板中访问id属性。

总之，您的问题的答案是否定的，您不需要手动进行ajax调用，因为您已经在您的Products集合中包含所有模型的信息。