Question

我正在尝试在服务器端使用Ruby on Rails构建一个backbone.js应用程序。

我能够获得产品清单，看起来很棒。

下一个任务是在用户点击产品时显示产品详细信息。根据我的代码，当我点击某个产品时，我会收到一条警告消息“ /products/20.json ”。

问题：我是否需要使用jQuery手动进行ajax调用？或者，如果Backbone.js符合REST标准，backbone.js是否可以帮助我获得该产品的价值？

$(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集合应该有一系列完整形成的产品型号，假设您的rails产品控制器索引操作类似于：

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

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

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

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

1 个答案: