0

コレクション内のXMLからデータをロードし、ビューページに表示しようとするハブの下にrequery.js構造を使用して、非標準のバックボーンアプリを作成しようとしています。

define([
  'jquery',
  'underscore',
  'backbone',
  'models/products'
], function($, _, Backbone, ProductsModel){
  var ProductsCollection = Backbone.Collection.extend({
    model: ProductsModel,
    url: "Labels.xml",
    parse: function(data) {
    var parsed=[];
    $(data).find('item').each(function (index) {
        var productNode = $(this).attr('nodeID');
        var productNodeValue = $(this).text();
        parsed.push({ title: productNode, value: productNodeValue });
    });
    return parsed;
},

fetch: function(options) {
    options || (options = {});
    options.dataType="xml";
    Backbone.Collection.prototype.fetch.call(this, options);
},
initialize: function(){
}

  });

  return ProductsCollection;
});

これはコレクションであり、これまでのところXMLからのデータでいっぱいですが、ページに表示したいと思います。ビューは次のようになります。

define([
  'jquery',
  'underscore',
  'backbone',
  // Pull in the Collection module from above
  'collections/products',
  'text!templates/products/main.html'

 ], function($, _, Backbone, ProductsCollection, productsListTemplate){
  var productsListView = Backbone.View.extend({
    el: $("#page"),
    render: function(){
      var data = {
        productDetails: this.collection,
        _: _ 
      };
      var compiledTemplate = _.template( productsListTemplate, data );
      this.$el.html( compiledTemplate ); 
    },  
    initialize: function(){
      this.collection = new ProductsCollection();
      this.collection = this.collection.fetch();
    }
  });
   return productsListView;
});

そしてページで私はそれを次のように見せようとします

<ul>
  <% _.each(productDetails, function(project){ %>
   <li><%= product.get("title") %> - <%= product.get("value") %></li> 
  <% }); %>
</ul>

しかし、私は常にエラーが発生します_eachは適切にフォーマットされていません。主なアイデアは、ラベルとボタンイベントをXMLからロードし、ページに表示することです。

4

2 に答える 2

0

まだ問題があるかどうかはわかりませんが、コードにエラーがあります:

<ul> <% _.each(productDetails, function(project){ %> <li><%= product.get("title") %> - <%= product.get("value") %></li> <% }); %> </ul>

次のようにする必要があります。

<ul> <% _.each(productDetails, function(product){ %> <li><%= product.get("title") %> - <%= product.get("value") %></li> <% }); %> </ul>

于 2013-09-10T20:31:35.397 に答える
0

this.collection.modelsだけでなく、テンプレートに渡したい this.collection

var data = {
  productDetails: this.collection.models,
  _: _ 
};

バックボーンではなくアンダースコアを使用しているためです。ループのバックボーンの方法は

Books.each(function(book) {
   book.publish();
});
于 2012-10-21T01:07:24.460 に答える