Inheriting and extending parent methods in backbone

Question

I have a userdetail backbone view and template. The sample code is

define(
        ['framework/baseclass'],

        function(baseclass) {
            var UserDetails = myModule();

            UserDetails.Model = Backbone.Model.extend({
                    //
            });

            UserDetails.Views.Content = Backbone.View
                    .extend({
                        template : "UserDetails",

                        initialize : function() {
                            //model
                        },

                        events : {

                        },


                        render : function(manage) {

                        },

                        renderOnceDomIsReady : function() {
                            createUserDetailPage();
                        },

                        createUserDetailPage: function(){
                            //use the html template and populate with data and additional look and feel
                        }
                    },

                        addNewUser: function()
                        {
                        },
                    });


        });

User would be presented that view to enter their details to create accounts.

I have an admin view wherein I want to show admin user the userdetail view, showing user account details in addition to have some additional elements in the html template that would have events in the overridden 'userdetail' view

The user detail template will not have account feature shown to non admin user, whereas when an admin user is viewing this via the admin view, they would be able to view such features.

One can argue that why not put in a flag in my original code to identify between non admin and admin account and then show the features based on that. However I have restrictions

that prevent me from making such code change. Hence this expedition of keeping existing code as is, look at ways to inherit from exiting code and give the added functionality

Yes either that or if nested views are possible on an event like button click on parent view. I came across a github plugin that works for nested view and waiting for team lead to review and approve it — user3865642, Jul 22 '14 at 18:34
This was one article I read: http://www.joezimjs.com/javascript/backbone-js-subview-rendering-trick/ — user3865642, Jul 22 '14 at 18:41

score 0 · Accepted Answer · answered Jul 22 '14 at 18:31

0

To create a view that inherits from another view all you need to do is extend your parent view. If you want to call a parents method you can do that using it's prototype.

For example

UserDetails.Views.AdminContent = UserDetails.Views.Content.extend({

      template:'AdminDetails' //this will override the parent template property


        events: _.extend({
           //add new events here 

        }, UserDetails.Views.Content.prototype.events), 

        initialize : function(options) {
              //model
              UserDetails.Views.Content.prototype.call(this,options);
        }
});

answered Jul 22 '14 at 18:31

Jack

10,943
13
50
65

This is wicked. Noob to backbone and this is great. Wonder if I can load the parent view inside a div and then enable div on button click – user3865642 Jul 22 '14 at 18:55
That should be doable, I'm not sure what you want to do precisely but you can probably accomplish that by calling the parent's render method on a specific div. – Jack Jul 22 '14 at 19:02
on admin page there is a button 'show user details' which when clicked I want to display the userdetailview, the button would enable a div and the userdetail view would be rendered in that div – user3865642 Jul 22 '14 at 19:05
OK you should be able to do that you might need to use a subview or you can just use the parents template. If you need some more detail than maybe post a new question along with whatever additional information needed. – Jack Jul 22 '14 at 19:10

Inheriting and extending parent methods in backbone

1 Answers1