how to render view from object using backbonejs?

Question

template code :

<script type="text/template" id="baseTemplate">
        <% collection.each(function() { %>
            <div>
                <%= collection %>
            </div>
        <% }); %>
</script>
<div id="baseContainer"></div>

and other code is :

//model
var PageModel = Backbone.Model.extend({
    defaults: {
        "id":null,
        "title":"",
        "content":""
    },
});
//collection
var PageCollection = Backbone.Collection.extend({
    defaults: {
        model: PageModel
    },
    model: PageModel,
    url: 'api/get_page/?id=6'
});
//view
var PageView = Backbone.View.extend({

    el: $('#baseContainer'),

    initialize: function () {
        this.collection = new PageCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.bind("change", this.render, this);
        this.collection.fetch();
    },
    render: function () {

    var html = _.template($("#baseTemplate").html(), { collection: this.collection });
    this.$el.html(html);
    console.log(html);
    return this;
    }
});

 var page = new PageView();

problem is that its return and object how can i get values from object? api link is http://furqankhanzada.com/backbonejs/api/get_page/?id=6 and here you can see object in browser console http://furqankhanzada.com/backbonejs/ i need to get title, content , attachments -> images -> Gallery Large -> url (attachments using each() ).

I'm not sure what you mean by "how can i get values from object?". Do you mean inside your template? — mu is too short
– mu is too short, Commented Nov 3, 2012 at 2:12

Cyclone · Accepted Answer · 2012-11-03 14:22:15Z

1

Not sure whether this is proper solution or not, but you can give it a try.

An alternative can be like,

var html = _.template($("#baseTemplate").html(), { models: this.collection.models });

Pass models instead of directly passing collection. And in the template you can do something like this,

<script type="text/template" id="baseTemplate">
  <% _.each(models, function(mdl) { %>
    <div>
      <%= mdl.get('title') %>
      <%= mdl.get('content') %>
      <% _.each(mdl.get('page').attachments, function(attachment) { %>
        <%= attachment.images["Gallery Large"].url %>
     <% }) %>  
   </div>
  <% }); %>
</script>
<div id="baseContainer"></div>

Please modify the markup as per your needs. But this solution is too specific to the problem :( :(

edited Nov 3, 2012 at 14:22

answered Nov 3, 2012 at 7:43

Cyclone

1,5801 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Cyclone Over a year ago

What error is it giving ? And can you please check that value does this.collection.models have in the view ?

Cyclone Over a year ago

Now it looks like the url is giving proper collection object. Can you please replace mdl.title with mld.get('title'), mdl.content with mdl.get('content') and mdl.page.attachments with mdl.get('page').attachments in the template and give it a try ?

Muhammad Furqan Over a year ago

mdl.get('page') has hole page and we just need to add attr name like mdl.get('page').title, mdl.get('page').content, mdl.get('page').attachment. its mean we don't need collections ?

Muhammad Furqan Over a year ago

you think this is Good Solution ?

Cyclone Over a year ago

Yes Furqan, thats what I thought of writing in answer when I wrote it, saying that if every time collection is going to have only one model, then we should not be using collection, coz it defeats the purpose of collection. Instead just a model can be created and used.

|

Collectives™ on Stack Overflow

how to render view from object using backbonejs?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related