Backbone.js Subview rendering

Question

I am trying to get to grips with Backbone.js and have been following the 'modular' approach outlined by Thomas Davis here.

I seem to be stuck when trying to 'include' a view within another view as follows:

SettingsView.js

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/settings/settingsTemplate.html'
], function($, _, Backbone, settingsTemplate){   

  var SettingsView = Backbone.View.extend({
    el: $("#interface"),

    render: function() {
      this.$el.html(settingsTemplate);
    }

  });

  return SettingsView;

});

ScriptView.js

define([
    'jquery', 
    'underscore', 
    'backbone',
    'views/settings/SettingsView',
    'models/script/ScriptModel', 
    'collections/scripts/ScriptsCollection',
    'text!templates/script/scriptTemplate.html'
],    
    function($, _, Backbone, SettingsView, ScriptModel, ScriptsCollection,  scriptTemplate) {

    var ScriptView = Backbone.View.extend({
        el : $("#container"),

        render : function() {
            this.$el.html(scriptTemplate);

            //add the settings view
            var settingsView = new SettingsView();
            settingsView.render();
        }
    });

    return ScriptView;
});

UPDATED: I have managed to fix the error which I have just realised as to why that was happening (params were in the wrong order - DOH!!)

I no longer get the error but my 'SettingsView' is still not appearing. When I console log this inside 'ScriptView.js' I see that 'el' is undefined so my thinking is that this is where the issue may be...?

Thanks

As a server-side js newbie, I'm afraid I would be of little help, anyway, in scriptview.js the order of names in the 'namespaces' does not seem to match the order of the function parameters. (might be the cause of the "has no method"). Also seems like people usually return the view itself as a result of render — jbl, Oct 14 '13 at 11:23
Also (still a newbie question), what is this.$el ? Shouldn't it be `this.el` or `$(this.el)` ? — jbl, Oct 14 '13 at 11:28
Thanks jbl - yes I had just realised that myself hence the updated post ;). I have now got it working (I think?) - at least I can now see my subview on the page so I am guessing it's okay. Aside from the obvious mistake you mentioned I have also changed the render method in 'SettingsView.js' to: **var compiledTemplate = _.template( settingsTemplate ); $("#interface").append(compiledTemplate);** and this seems to have done the trick! — dooweb, Oct 14 '13 at 11:30

score 1 · Answer 1 · edited May 23 '17 at 12:10

I think you have to append the SettingsView to the el of the ScriptView:

var ScriptView = Backbone.View.extend({
    el : $("#container"),

    render : function() {
        this.$el.html(scriptTemplate);

        //add the settings view
        var settingsView = new SettingsView();
        settingsView.render();

        this.$el.append(settingsView.el);
    }
});

And a great post about subviews is this one.

I hope it helps!

Backbone.js Subview rendering

1 Answers1