шаблон underscore.js || связать / добавить позвоночник

Question

шаблон underscore.js || связать / добавить позвоночник

0

На днях я задал вопрос об этом приложении; после некоторых хороших советов я перешел, и теперь я думаю, что это другая проблема. Раньше я не получал никаких отображений на экране/никаких ошибок или каких-либо 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]

Rhaebosis 01 апр. 2014, в 12:25

Источник

Теги:

javascript

jquery

backbone.js

underscore.js-templating

1 ответ

Ещё вопросы

Niranjan Borawake · Answer 1 · 2014-04-01T11-09-00.000Z

В вашем коде есть намного больше вещей, которые можно улучшить. Вот 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'
        }));
    });
}());

Спасибо за совет :) Пожалуйста, не могли бы вы просмотреть изменения, которые я сделал из ваших предложений? Мой файл больше не читается, и у меня нет данных для инициализации моей коллекции. Спасибо
@LadyRhaebosis Добро пожаловать. Я обновил код и добавил модифицированный метод initialize который должен newsFeed.js данные из newsFeed.js .
Еще раз спасибо за ваш совет. Пожалуйста, не могли бы вы просмотреть код еще раз. Мой цикл _.each сходит с ума. Спасибо за это, это действительно ценится :)