I am new to backbone.js and here is my question.

First I setup routing:

var Router = Backbone.Router.extend({

    initialize: function(){

      var data = {
        member: new Member.Model({ _id: 'some id' })
      };

      _.extend(this, data);
      // Use main layout and set Views.
      app.useLayout("main-layout").setViews({
        ".member": new Member.Views.Start(data)
      }).render();
    },
    routes: {
      "": "index"
    },
    index: function() {
      this.member.fetch();
    }
});

On index route this will simply get the start view and add it to the DOM when an element matches the member class. This works just fine. However inside the template I have:

<%= model.get('username') %>

And this prints

function String() { [native code] }

instead of the model attribute. Here is the model and view class:

var Member = app.module();

Member.Model = Backbone.Model.extend({
    urlRoot: '/Members',
    idAttribute: "_id",
    defaults: {
      _id: null,
      name: String,
      email: String,
      username: String,
      initials: String,
      provider: String,
      provider_id: String,
      confirmed: Boolean,
      provider_avatar: String
    },
    initialize: function(models, options){

    }
  });

Member.Views.Start = Backbone.View.extend({
    template: "member/start",
    serialize: function() {
      return { model: this.options.member };
    },        
    initialize: function() {

    }
  });

For my project I use the backbone boilerplate Template enging :

Why do I get this text instead of the model values, and how to fix this?

I am new to backbone.js and here is my question.

First I setup routing:

var Router = Backbone.Router.extend({

    initialize: function(){

      var data = {
        member: new Member.Model({ _id: 'some id' })
      };

      _.extend(this, data);
      // Use main layout and set Views.
      app.useLayout("main-layout").setViews({
        ".member": new Member.Views.Start(data)
      }).render();
    },
    routes: {
      "": "index"
    },
    index: function() {
      this.member.fetch();
    }
});

On index route this will simply get the start view and add it to the DOM when an element matches the member class. This works just fine. However inside the template I have:

<%= model.get('username') %>

And this prints

function String() { [native code] }

instead of the model attribute. Here is the model and view class:

var Member = app.module();

Member.Model = Backbone.Model.extend({
    urlRoot: '/Members',
    idAttribute: "_id",
    defaults: {
      _id: null,
      name: String,
      email: String,
      username: String,
      initials: String,
      provider: String,
      provider_id: String,
      confirmed: Boolean,
      provider_avatar: String
    },
    initialize: function(models, options){

    }
  });

Member.Views.Start = Backbone.View.extend({
    template: "member/start",
    serialize: function() {
      return { model: this.options.member };
    },        
    initialize: function() {

    }
  });

For my project I use the backbone boilerplate https://github./backbone-boilerplate/backbone-boilerplate Template enging : https://github./backbone-boilerplate/backbone-boilerplate/wiki/Working-with-templates

Why do I get this text instead of the model values, and how to fix this?

• javascript
• backbone.js

• Without seeing the Model definition or the template call or what template engine you are using it is hard to help, is username defined as a function? – Andrew Commented Jun 26, 2013 at 18:27

2 Answers 2

The default value of the username attribute is String:

Member.Model = Backbone.Model.extend({
    ...
    defaults: {
      ...
      username: String,
      ...

and String is a function:

> String
function String() { [native code] }

This is what you're seeing (remember, in Javascript you can assign functions to variables).

If you expect the default to be some value of type string, you need to change the code like so:

Member.Model = Backbone.Model.extend({
    ...
    defaults: {
      ...
      username: '',
      ...

In your Model definition you define all your defaults as functions, one way to fix it is to use actual strings for the defaults,

defaults: {
  _id: null,
  name: '',
  email: '',
  username: '',
  initials: '',
  provider: '',
  provider_id: '',
  confirmed: false,
  provider_avatar: ''
},

If you type String into your browsers console you will get,

 function String() { [native code] }

That is why your output is how it is.