CODEWITHSUNDEEP
javascriptbackbone.js
dooweb
dooweb

Reputation: 41

Backbone.js Subview rendering

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

Upvotes: 1

Views: 173

Answers (1)

Puigcerber
Puigcerber

Reputation: 10094

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!

Upvotes: 1

Related Questions