Search code examples
javascriptbackbone.jseach

How to create mutliple spans from within a Backbone view

I have a a collection of model data that I need to render inside a div like this:

_.each(model.stages, function(stagesData){
                    this.$('.stageDate').text(stagesData.get('status'));
                    this.$('.stageStatus').text(stagesData.get('timestamp'));
                });

This is the HTML where I'm trying to render that data:

 <span class="stageDate"></span>
 <span class="stageStatus"></span>

Now what's happening right now is that it only shows the last item inside my Model in the view and not all. I know that it is because the loop overwrites the previously created span, so just wanted to understand what is the way to go about it? Please suggest!

Solution

  • Instead of text():

    this.$('.stageDate').text(stagesData.get('status'));

    Use append():

    this.$('.stageDate').append('</p>' + stagesData.get('status') + '</p>');