백본 컬렉션은 _.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

App.Views.MyItems의 'el :'# items '뷰에서 엘리먼트를 정의해야 할 필요가 있습니다. – EmptyArsenal

덕분에 코드를 편집했지만 브라우저에 이전과 같은 화면이 있습니다 ... 거기에서 볼 수 있습니다 : backbone.web2me.sk – Makromat

백본 컬렉션은 _.groupedBy이지만 렌더링이 작동하지 않습니다.

답변

관련 문제