На днях я задал вопрос об этом приложении; после некоторых хороших советов я перешел, и теперь я думаю, что это другая проблема. Раньше я не получал никаких отображений на экране/никаких ошибок или каких-либо console.logs. Поработав над этим еще немного, у меня теперь есть моя модель/представление и часть моей функции рендеринга.
Я думаю, проблема связана с моим шаблоном или с моим добавлением. Ниже приведен полный код в его нынешнем виде. Есть//комментарии, где я думаю, что могут быть некоторые проблемы. Любая помощь с этим была бы весьма признательна.
EDIT :: Спасибо за совет Ниранджана. Я сделал некоторые изменения, которые вы упомянули; Я забрал счетчик и образцы данных. С этими новыми изменениями мой newsFeed.js больше не читается, и поэтому я не понимаю, как заполнить мою коллекцию. Когда я console.log из моей коллекции, я получаю пустой массив с моими показаниями по умолчанию, но если файл json не читается в первую очередь, как мне заставить что-нибудь работать?
EDIT # 2 :: Еще раз спасибо Нираньяну. С изменениями, которые вы предложили, и некоторыми из моих собственных, теперь у меня есть код ниже. Проблема, которую я имею прямо сейчас: мой массив заполняется слишком много раз. файл JSON содержит всего 8 записей, и из-за моего оператора _.each в моем шаблоне он циклически 8 раз, где я только хочу, чтобы он зациклился один раз, а затем разделил массив на отдельные записи. Я попробовал сначала разбить его во время анализа ответа, но это не сработало, есть ли у вас какие-либо советы для этого?
ниже кода ссылки на живые представления кода и html/broswer содержимого, включая ссылку на файл JSON.
Моя конечная цель - нажать на один заголовок и показать соответствующее содержание.
(function(){
var NewsFeedModel = Backbone.Model.extend({
defaults: {
title: '',
content: ''
}
});
var NewsFeedCollection = Backbone.Collection.extend({
model: NewsFeedModel,
url : 'newsFeed.js',
parse: function(response) {
console.log('collection and file loaded');
return response.responseData.feed.entries;
}
});
var NewsFeedView = Backbone.View.extend({
el : '.newsContainer ul',
template: _.template($("#feedTemp").html()),
initialize: function(){
var scopeThis = this;
_.bindAll(this, 'render');
this.collection.fetch({
success: function(collection){
scopeThis.render();
}
});
this.collection.bind( 'add', this.render, this);
console.log('View and Template read');
},
render: function () {
this.$el.html(this.template({
feed: this.collection.toJSON()
}));
console.log(this.collection.toJSON());
}
});
var newsFeedCollection = new NewsFeedCollection();
var newsFeedView = new NewsFeedView({
collection: newsFeedCollection
});
var title = newsFeedCollection.find('title');
var content = newsFeedCollection.find('content > title');
$(document).on("click", "#add", function(title, content) {
console.log("I have been clicked");
if($(title) == $(content)){
console.log('they match');
}
else{
console.log('they dont match');
}
$('.hide').slideToggle("slow");
});
}());
Это мой шаблон подчеркивания.
<div class="span12">
<script id="feedTemp" type="text/template">
<% _.each(feed, function(data) { %>
<div id = "titleContent">
<a href='#' id ="add"> <%= data.title %> </a>
<div id="content" class="hide">
<%= data.content %>
</div>
</div>
<% }); %>
</script>
</div>
Я использую Google-диск в качестве площадки для тестирования; ссылки для полного html/кода. https://docs.google.com/file/d/0B0mP2FImEQ6qa3hFTG1YUXpQQm8/edit [просмотр кода] https://googledrive.com/host/0B0mP2FImEQ6qUnFrU3lGcEplb2s/feed.html [просмотр браузера] https://docs.google.com/file/d/0B0mP2FImEQ6qbnBtYnVTWnpheGM/изменить [файл JSON]
В вашем коде есть намного больше вещей, которые можно улучшить. Вот JSFIDDLE.
Пожалуйста, просмотрите комментарии, упомянутые в коде.
Для проверки элементов в шаблоне Underscore проверьте редактор шаблонов Underscore.
Шаблон:
<button id=add>Add</button>
<div class="newsConatiner">
<ul></ul>
</div>
<script id="feedTemp">
<% _.each(feed, function(data) { %>
<div id = "titleContent">
<h2> <%= data.title %> </h2>
<div id="content">
<%= data.content %>
</div>
</div>
<% }); %>
</script>
Код:
(function () {
var NewsFeedModel = Backbone.Model.extend({
//url: 'newsFeed.js',
defaults: {
title: '',
content: ''
}
});
var NewsFeedCollection = Backbone.Collection.extend({
model: NewsFeedModel,
url: 'newsFeed.js',
parse: function (response) {
console.log('collection and file loaded');
return response.responseData.feed.entries;
}
});
var NewsFeedView = Backbone.View.extend({
el: '.newsConatiner',
//template should not be inside initialize
template: _.template($("#feedTemp").html()),
initialize: function () {
_.bindAll(this, 'render');
this.render();
//ADD event on collection
this.collection.bind('add', this.render, this);
console.log('View and Template read');
},
/*
This initialize will fetch collection data from newsFeed.js.
initialize: function () {
var self = this;
_.bindAll(this, 'render');
this.collection.fetch({
success: function(collection){
self.render();
}
});
//ADD event on collection
this.collection.bind('add', this.render, this);
console.log('View and Template read');
},
*/
render: function () {
//This is how you can render
//Checkout how this.collection is used
this.$el.html(this.template({
feed: this.collection.toJSON()
}));
}
});
//Initialized collection with sample data
var newsCounter = 0;
var newsFeedCollection = new NewsFeedCollection([{
title: 'News '+newsCounter++,
content: 'Content'
}]);
//Created view instance and passed collection
//which is then used in render as this.collection
var newsFeedView = new NewsFeedView({
collection: newsFeedCollection
});
$('#add').click(function(){
newsFeedCollection.add(new NewsFeedModel({
title: 'News ' + newsCounter++,
content: 'Content'
}));
});
}());
initialize
который долженnewsFeed.js
данные изnewsFeed.js
.