0

我正在为我的_.groupBy功能而苦苦挣扎。使用此代码，我在浏览器中呈现如下内容：

align
spellcheck
isContentEditable
contentEditable
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
outerText
outerHTML

这是我的整个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Backbone test</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    ul.items{list-style: none;width: 100%;margin: 0px;-webkit-margin-before: 0em;-webkit-padding-start: 0px;}
    </style>
</head>
<body>
<header>
</header>
<content>  
   <div class="jumbotron">
       <div class="container">
           <h1>My Items!</h1>
       </div>
   </div>
   <div id="items"></div>

   <div class="jumbotron">
       <div class="container">
           <h1>My Grouped Items?</h1>
       </div>
   </div>

</content>
<footer>
</footer>
<script id="allItemTemlate" type="text/template">
       <ul>
       <% _.each( items, function( category, i ){  %>
           <li>
               <h3><%= i %></h3>
               <ul>
               <% _.each( category, function( item ){ %>
               <li>
                 <%= title %>
               </li>
               <% }) %>
               </ul>
         </li>
       <% }) %>
       </ul>   
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
(function() {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
    };
    window.vent = _.extend({}, Backbone.Events);
    window.template = function(id) {
        return _.template( $('#' + id).html() );
    };
})();

// !models.js

App.Models.Item = Backbone.Model.extend({});

// !collections.js

App.Collections.Items = Backbone.Collection.extend({
    model: App.Models.Item,
    url: 'api/items.json'
});

// !views.js

App.Views.MyItems = Backbone.View.extend({
    el: '#items',
    initialize: function() {
    var groups = _.groupBy(this.collection.toJSON(), 'category');
    console.log(groups);

        vent.on('item:edit', this.editItem, this);
        var allItemsView = new App.Views.Items({ collection: App.items }).render();
        $('#items').append(allItemsView.el);
    },

    editItem: function(item) {

        var editItemView = new App.Views.EditItem({ model: item });

        $('#edit-item').html(editItemView.el); 
    },
});    

App.Views.Items = Backbone.View.extend({
    tagName: 'ul',
    className: 'items',
    initialize: function() {
      this.collection.on('add', this.addOne, this);  
    },
    render: function() {
      this.collection.each( this.addOne, this );
      return this;
    },
    addOne: function(item) {
        var itemView = new App.Views.Item({ model: item });
        this.$el.append(itemView.render().el);
    },
});

App.Views.Item = Backbone.View.extend({
    tagName: 'li',
    className: 'item',
    template: template('allItemTemlate'),
    initialize: function() {
      this.model.on('destroy', this.unrender, this);
      this.model.on('change', this.render, this);
    },
    render: function() {
      this.$el.html( this.template( this.model.toJSON() ) );
      return this;
    },
});

// !router.js

App.Router = Backbone.Router.extend({
    routes: {
        '':'index',
    },
    index: function() {
        console.log('index page !');
    },
});

new App.Router;
Backbone.history.start();

App.items = new App.Collections.Items;
App.items.fetch().then(function() {
    new App.Views.MyItems({ collection: App.items });
});
</script>
</body>
</html>

在控制台中，我看到了数组，但没有正确渲染。 我不知道如何正确使用所有功能。

4

1 回答 1

1

我还没有通读你的所有代码，所以我不能谈论任何其他问题，但我可以立即看到你的 groupBy 函数有问题。如果您使用 App.Collections.Items，您不会将在视图中实例化的集合传递给函数；你将把空的 Collection 构造函数对象传递给函数！此外，您需要将集合转换为 JSON。你想要的是更像这样的东西：

var groups = _.groupBy(this.collection.toJSON(), 'category');
于 2013-09-25T00:22:28.230 回答