Question

我正在尝试制作一些非标准骨干应用程序，在集线器下使用requery.js结构我从我的集合中的XML加载数据，并尝试在视图页面上显示它。

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>

但我总是得到错误_每个格式不正确。主要思想是从XML加载标签和按钮事件，并在页面上显示它。

Answer 1

您希望不只是this.collection.models

传递给您的模板this.collection

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

因为您使用的是Underscore而不是Backbone。用于循环的Backbone方式是

Books.each(function(book) {
   book.publish();
});

Answer 2

我不知道您是否仍然遇到此问题，但您的代码中存在错误：

<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>

Backbone.js将XML加载到Backbone.Model并在视图上显示它

2 个答案: