CODEWITHSUNDEEP
templatesbackbone.jsunderscore.js
Locohost
Locohost

Reputation: 1702

Backbone Underscore error on template render: Uncaught TypeError: Object #<Object> has no method 'get'

At the console.log line in the render method below, it shows that this.member instance is exactly what it should be. So member object is good. I've spit out the string in tpl and it's what it should be. So what's causing the error in topic title?

Additional info: This view is a subview rendered by parent. I'm using Backbone.Subviews.

Thanks a lot for your help. I'm spinning my wheels :-/

Here is my code...

EDIT: Changed member object attrib references and now it works...

Template...

<div class="wrap-profile container">
    <div class="profile-pic">
        <div class="pic">
            <img src="<%= pathUploads %><%= member.photo_profile %>" width="400" height="600" id="<%= member.id %>" class="photo-img">
        </div>      
    </div>
    <div class="profile-info">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur urna nec erat pretium tempus.
        </div>  
        <div>
            Morbi nec arcu at leo lobortis egestas. Phasellus sagittis neque dolor, ut congue lorem egestas id.m laoreet, vitae tristique lorem sollicitudin.
        </div>  
        <div>
            In vel libero eget enim rhoncus suscipit. Nunc tristique in nisi eget bibendum. Mauris et pulvinar orci.
        </div>  
        <div>
            Quisque eget sem id dolor tempus dictum. Pellentesque luctus scelerisque lacinia.
        </div>  
        <div>
            Sed gravida rutrum bibendum. Aenean condimentum eu dui nec adipiscing. Duis sagittis pharetra enim.
        </div>  
    </div>
</div>

The view js...

// ProfileView.js

define( function(require) {

    "use strict";

    var $                   = require('jquery'),
        _                   = require('underscore'), 
        Backbone            = require('backbone'), 
        Helper              = require('helper'), 
        tpl                 = require('text!templates/profilePicTemplate.html'),

        template            = _.template(tpl);

    return Backbone.View.extend({

        el: $("#profile"),

        initialize: function(member) {
            var self = this;
            this.member = member;
        },

        render: function() {
            var data = {
                pathUploads: Helper.global.pathUploads, 
                member: this.member 
            };
            console.log(this.member);
            this.$el.html(template(data));
            return this;
        },

        destroy: function() {
            template = null
            this.member = null;
        }

    });

});

Upvotes: 0

Views: 426

Answers (1)

Peter Lyons
Peter Lyons

Reputation: 146154

The evidence points quite directly at this.member being a plain old javascript object instead of an instance of a Backbone.Model subclass. You seem to be aware of this, so I think it's a case of "no really, hear us now and believe us later". To test this theory, swap in this snippet.

var data = {
  pathUploads: Helper.global.pathUploads, 
  member: new Backbone.Model(this.member) 
};

If that fixes it, the theory holds.

(Aside...)

For what it's worth, making your template require a backbone model instance instead of plain data is probably inferior, so consider just having your template do <%= member.photo_profile %> instead so it doesn't care where the data comes from. This also makes it easier to use the presenter design pattern. You can use member.toJSON() in your view to get at the plain data attributes to pass in to the template.

Upvotes: 3

Related Questions