Button in sub view is not working in main view of backbone js

Question

I create one sign in view, and put it in other main views.

Here is one of a main view :

define(["jquery" ,
        "underscore" ,
        "backbone" ,
        "webconfig",
        "text!templates/header.html",
        "text!templates/signInTemplate.html" ,
        "text!templates/miniSignInTemplate.html",
        "text!templates/footer.html"
],function($ , _ , Backbone, WebConfig, HeaderTem, SignInTem, MiniSignInTem, FooterTem){

  var signInView = Backbone.View.extend({
    initialize : function(){
    },
    el: '#webbodycontainer',
    render : function(){
        this.$el.empty();
        var headerTem = _.template(HeaderTem);
        var signInTem = _.template(SignInTem);
        var miniSignInTem = _.template(MiniSignInTem);
        var footerTem = _.template(FooterTem);

        $("#webheader").html(headerTem);
        this.$el.html(signInTem);
        $("#rightpanel").html(miniSignInTem);
        $("#webfooter").html(footerTem);
    }
  });
  return signInView;
});

And here is a sub view :

 define(["jquery" ,
         "underscore" ,
         "backbone" ,
         "webconfig",
         "text!templates/miniSigninTemplate.html"
 ],function($ , _ , Backbone , WebConfig , signinTemp){
   var MiniView = Backbone.View.extend({
    initialize:function(){
        this.render();
    },
    event : {
        'click #signIn' : 'signInUser'
    },
    signInUser : function(){
      alert(1);
    },
    render:function(){
        var template = _.template(signinTemp)
        this.$el.html(template);
    }
  });
 return MiniView;
});

Routing main view :

app_router.on('route:signInAction', function(signIn){
    if(window.currentSection)
        window.currentSection.remove();
    window.currentSection = new SignIn({});
    $("#webbodycontainer").html(window.currentSection.$el);
    window.currentSection.render(signIn);
});

Problem : signInUser in sub view is not working also the whole view (MiniView) is not called. Did I miss something?

Any help would be much appreciated, thank you..

Where is `#signIn`? Inside `#rightpanel` or outside it? Is `#rightpanel` available when you expect it to be (i.e. when you're building `MiniView`)? — mu is too short, Mar 18 '14 at 04:58
`#signIn` is inside `#rightpanel`. Your second question, I don't understand, excuse me, could you please rephrase it? — Nothing, Mar 18 '14 at 09:32
`$("#rightpanel")` will be executed when `MiniView` is being built, not when you `new MiniView`. So I'm asking if `#rightpanel` is in the DOM when you load the subview (not when you instantiate it but when the JavaScript is loaded). You probably want `el: '#rightpanel'` in any case. — mu is too short, Mar 18 '14 at 16:48
I've searched in `DOM`, there's no `#rightpanel`. I tried `el:'rightpanel'` in mini view, but it is still not working. — Nothing, Mar 19 '14 at 02:51
Then why are you trying to use an `id="rightpanel"` element as the `el`? Do you want that view to create its own `el`? And `el:'rightpanel'` would be looking for a `` element. — mu is too short, Mar 19 '14 at 03:10

score 1 · Answer 1 · answered Mar 19 '14 at 08:06

1

In what you have written here, you can render the view by doing something like this:

var singInView = new SignIn();
enter code heresingInView.render();

You will not need these lines:

window.currentSection = new SignIn({});
// unnecessary, just create a new object when needed
// plus, binding objects to window is totally not standard

$("#webbodycontainer").html(window.currentSection.$el);
// when you call render() on a new object, it binds it to the dom
// you do not need this line either

window.currentSection.render(signIn);
// why are you passing signIn to render? this doesn't do anything

In short, you can call your view and render it in a one liner (if you are not passing any other arguments to the view) like this:

(new SignIn()).render();

If you want to pass arguments to the view, again you can do it in a one liner:

(new SignIn({
    key: value,
    key: value
})).render();

answered Mar 19 '14 at 08:06

hamid

1,828
1
13
17

Typically, folks put comments above the code that is being commented. – fbynite Mar 19 '14 at 09:09
I was coding those block of code because of this reason http://stackoverflow.com/questions/19584404/calling-method-once-but-it-executed-many-times-in-backbone. – Nothing Mar 19 '14 at 09:32
Using `(new SignIn()).render();`, when I click on `signIn` route, it did anything. – Nothing Mar 19 '14 at 09:36
@fbynite, how long did you laugh on that? Sorry. – hamid Mar 19 '14 at 10:37
Any idea about this issue? – Nothing Mar 31 '14 at 03:28

Button in sub view is not working in main view of backbone js

1 Answers1