Как разделить результат коллекции JSON с помощью backbone.js

Question

Как разделить результат коллекции JSON с помощью backbone.js

Текущие результаты моего JSON это.

<div id="item-list">
<div class="row" id="featured-item">
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
</div>

Можно ли сделать так?

<div id="item-list">
<div class="row">
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
<div class="row">
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
<div class="row">
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
<div class="row">
<div class="col-md-6"><p>Content Righ Here</p></div>
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
<div class="row">
<div class="col-md-6"><p>Content Righ Here</p></div>
</div>
</div>

Вот мой текущий код jS:

var Feed = Backbone.Model.extend({
url: function () {
//API LINK HERE
},
defaults: {
// SOME ATTRIBUTES HERE
}
});

var Stream = Backbone.Collection.extend({
url: function () {
//API LINK HERE
return link;
},
page: 0,
sort: 'date_created',
order: 'desc',
limit: 12,
model: Feed,
parse: function (response) {
$('.total_records').text(response._count);
var tags = response.data;
this.totalRecords = response._count;
return tags;
}
});

// Master view
var DirectoryView = Backbone.View.extend({
el: $("#main-section"),
initialize: function () {
this.collection = this.options.collection;
this.isLoading = false;
this.render();
this.collection.on("add", this.renderFeed, this);
},
events: {
'click #loadmore-feed' : 'loadMore'
},
render: function () {
var that = this;
this.isLoading = true;
this.collection.fetch({success: function () {
_.each(that.collection.models, function (item) {
that.renderFeed(item);
}, this);
that.isLoading = false;
$("abbr.timeago").timeago();

that.$el.find('#load-more-container').html(
_.template($('#load-more-template').html())
);
}
});

if(!this.collection.totalRecords) {
$('#load-more-container').hide();
}
},
loadMore: function () {
$('#load-more-container').hide();
if(this.collection.totalRecords > this.collection.page) {
this.collection.page += 12;
this.render();
$('#load-more-container').show();
}
},
renderFeed: function (item) {
var optionsView = new OptionsView({
model: item
});

this.$el.find('#item-list > div').append($(optionsView.render().el).hide().fadeIn('slow'));

}
});

var OptionsView = Backbone.View.extend({
tagName: "div",
className: "col-md-6",
template: $("#emp-list-item").html(),
render: function () {
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
return this;
}
});

HTML-код

<div id="main-section">
<div id="item-list">
<div class="row" id="featured-item"></div>
</div>
<div id="load-more-container"></div>
</div>
<!-- backbonejs view template -->
<script id="emp-list-item" type="text/template">
<p>Content Righ Here</p>
</script>
<script id="load-more-template" type="text/template">
<p>
<div class="progress xs progress-striped">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="tcenter">
<a href="javascript:void(0)" id="loadmore-feed">Load more</a>
</div>
</p>
</script>

<!-- Script for autoloading on mobile device -->
<script type="text/javascript">
$(document).ready(function() {
var paginatedItems = new Stream();
var directoryView = new DirectoryView({collection: paginatedItems});
$(window).scroll(function() {
if (directoryView.$el.is(':visible') && !directoryView.isLoading && $(window).scrollTop() + $(window).height() > getDocHeight() - 400 ) {
directoryView.loadMore();
}
});
});
</script>

1

backbone.js javascript jquery json php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Заголовок вашего вопроса относится к JSON, но ваш пример касается HTML, а это совершенно другие проблемы. Я не могу сказать, имеете ли вы в виду «могу ли я создать этот тип структуры HTML» или «могу ли я сделать так, чтобы моя коллекция содержала эту структуру данных».

Без решения основных вопросов, вы все равно должны переместить fetch вне renderи сделать render то, что происходит на success, Например:

initialize: function(models) {
// ...do stuff...
if (!models)
this.fetch({success: this.render, error: this.error});
_.bindAll(this, 'render', 'error', 'render');
},

В вашем success, вы должны подготовиться к render:

render: function(collection) {
var modelsFlat = collection.models;
var nested = _(list).chain().partition(function(x) {

// below makes an array of evens and odds indices

return (_(list).indexOf(x) % 2) == 0;

}).zip()           // this turns columns into rows, ie [[1,3,5],[2,4,6]] => [[1,2],[3,4],[5,6]]
.value();        // this unwraps (no more chaining)

_(nested).each(function(n) {
var inner = new Backbone.Collection(n);
var innerView = new OptionsView(inner);
innerView.render();
});
// Do the rest of your current render
}

И твой новый DirectoryItemView в значительной степени OptionsView, который не включает в себя вещи на стороне сервера.

Итак, это:

Вызывает fetch на initialize внешнего вида, чтобы получить внешнюю коллекцию
На success звонки render
На render, реорганизует каждую пару предметов в новую маленькую коллекцию
На каждой коллекции создает новый внутренний OptionsView с этой коллекцией и отображает ее
Завершает рендеринг оставшейся части внешнего вида.

0