骨幹集合是_.groupedBy，但不渲染不起作用

我正在努力與我的_.groupBy功能。有了這個代碼，我已經在瀏覽器中呈現的東西是這樣的：骨幹集合是_.groupedBy，但不渲染不起作用

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>

在我看到的數組，但不正確呈現控制檯.. 我不知道如何正確使用所有功能。

來源

2013-09-24 Makromat

我還沒有讀完所有的代碼，所以我不能說任何其他問題，但我可以立即看到你的groupBy函數有問題。如果使用App.Collections.Items，則不會將視圖中實例化的集合傳遞給該函數;你將會把空的Collection構造函數對象傳遞給函數！另外，您需要將集合轉換爲JSON。你想要的更像是這樣的：

var groups = _.groupBy(this.collection.toJSON(), 'category');

來源

2013-09-25 00:22:28 EmptyArsenal

感謝回覆朋友！現在我看到在控制檯中的數組，但我怎樣才能正確渲染這個組與我的所有功能添加，編輯和刪除？ – Makromat

看起來你需要在你的視圖中定義一個元素'el：'＃items''在App.Views.MyItems – EmptyArsenal

謝謝我編輯過的代碼，但在瀏覽器中我有像以前一樣的screan ...你可以看到那裏： backbone.web2me.sk – Makromat

骨幹集合是_.groupedBy，但不渲染不起作用

回答

相關問題