子视图中的按钮在主干js的主视图中不起作用

时间:2014-03-18 03:07:25

标签: javascript backbone.js

我在视图中创建了一个符号,并将其放在其他主视图中。

以下是主要观点之一:

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;
});

这是一个子视图:

 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;
});

路由主视图:

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);
});

问题:子视图中的signInUser不起作用,也没有调用整个视图(MiniView)。我错过了什么吗?

非常感谢任何帮助,谢谢..

1 个答案:

答案 0 :(得分:1)

在这里写的内容中,您可以通过执行以下操作来呈现视图:

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

您不需要这些行:

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

简而言之,您可以调用视图并将其渲染为一行(如果您没有将任何其他参数传递给视图),请执行以下操作:

(new SignIn()).render();

如果你想将参数传递给视图,你可以再次使用一行:

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