必要时在AMD / Require.js模块中定义自定义属性并加载其他模块?

时间:2014-09-30 19:56:45

标签: javascript backbone.js requirejs amd

我正在尝试为中央控制器(实际上是一个骨干视图)定义新属性,以使其更加划分和结构化。我尝试在if语句的不同情况下分离我想要实现的渲染,并在这些新属性中实现每个case的渲染。但是在插入替换代码之后,为了实现这一点并在代码注释之前使我的应用无法正常工作。

我做错了什么。

我可以想象的另一种模块化方法是有条件地再次在单独的文件中加载不同的AMD / Require.js模型,并加载它们。但是怎么样?通过render:中的require(),或者通过新的moduleName传递给下面的define()的第二个参数。

define([
  'jquery',
  'ratchet',
  'underscore',
  'backbone',
  'models/login',
  'text!templates/login.html',
  'text!templates/app.html'

  ], function($, Ratchet, _, Backbone, LoginModel, LoginTmpl, AppTmpl){
      var LoginView = Backbone.View.extend({

          el: $("body"),

          template_login: _.template(LoginTmpl),
          template_app: _.template(AppTmpl),

          initialize: function(){
              this.model = new LoginModel;
              this.listenTo(this.model, 'change', this.render);
              this.render();
          },
        //Replacement code: two attributes:
          render_login: function(){
              this.$el.html(this.template_app( this.model.toJSON() ));
              console.log(JSON.stringify(this.model) );
              return this;
            }
          },
          render_app: function(){
              this.$("#content").html(this.template_login( this.model.toJSON() ));
              console.log(JSON.stringify(this.model) );
              return this;
          },
          render: function() {
            /*
            if (this.model.get('loginp') == true) { 
            this.$el.html(this.template_app( this.model.toJSON() ));
            console.log(JSON.stringify(this.model) );
            return this;                
            }
            */

            /*
            else {
            this.$("#content").html(this.template_login( this.model.toJSON() ));
            console.log(JSON.stringify(this.model) );
            return this;
            }
            */
            //Replacement code: 
            if (this.model.get('loginp') == true) {
                this.render_app;
            } else {
                this.render_login;
            }
          },

          events: {
              'click #loginbtn' : 'login',
              'click #registerbtn' : 'register'
          },

          login: function(e){
              e.preventDefault();
              var formData = {};

              $( 'input' ).each( function( i, el ) {
                    if( $(el).val() != '' ) {
                        if( el.id === 'username' ) {
                            formData[ el.id ] = $(el).val();
                        } else if( el.id === 'password' ) {
                            formData[ el.id ] = $(el).val();
                        }
                    }
                    console.log( i + ": " + $(el).val() );
                    console.log(JSON.stringify(formData) );

                    // Clear input field values
                    $( el ).val('');
                });
                this.model.save( formData );
            }
        });
        return LoginView;
});

2 个答案:

答案 0 :(得分:1)

render方法中,调用{{1and1}}的替换代码实际上没有执行它们。你忘记了render_app

render_login

答案 1 :(得分:0)

总结上面的答案,遗忘的括号,

1-render_app和render_login到render_app()和render_login()

2 - 纠正语法错误:render_login函数定义中的第二个括号。

3 - 交换render_app和render_login属性名称或其匿名函数中使用的模板。他们彼此'。