Javascript 主干视图可以'；t访问jQuery选择器

我有一个处理注册组件的主干视图，因为这需要大量的表单访问，所以我想到将表单选择器存储在对象属性中

define(["models/security/user", 'text!templates/security/registration.html'], function(SecurityUserModel, Template){

    var SecurityRegistrationView;

    SecurityRegistrationView = Backbone.View.extend({
        initialize: function(){
            this.model = new SecurityUserModel();
            this.model.bind("validated:valid", this.valid);
            this.model.bind("validated:invalid", this.invalid);

            Backbone.Validation.bind(this);

            this.render();
        },
        render: function(){
            $(this.el).append(Template);
        },
        events: {
            "submit form": "submit"
        },
        form: {
            "username": $("#_user_username")
            , "email": $("#_user_email")
            , "password": $("#_user_password")
        },
        submit: function(e){
            e.preventDefault();

            this.model.set("username", this.form.username.val());
            this.model.set("password", this.form.email.val());
            this.model.set("email", this.form.password.val());
            this.model.validate();


            // debug    
            console.log([this.form, this.form.username.val(), this.form.email.val()]);

            if (this.model.isValid) {
                this.model.save();
            }
        },
        valid: function(model, attrs){
            // error
            this.form.attrs[0].username.parent("div.control-group").addClass("success");
        },
        invalid: function(model, attrs){
            // error
            this.form.attrs[0].username.parent("div.control-group").addClass("error");
        }
    });

    return SecurityRegistrationView;
});

当我使用console.log this.form时，我得到一个看起来很好的对象，没有未定义或奇怪的东西：

[
Object
    email: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_email"
        __proto__: Object[0]
    password: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_password"
        __proto__: Object[0]
    username: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_username"
        __proto__: Object[0]
    __proto__: Object
]

登录jquery函数访问选择器（this.form.username.val（））失败，原因是未定义

---

为什么不能在属性上使用jQuery函数（$el使用它来）思考错误在哪里？

这是一个上下文问题，您可以像这样更新代码：

initialize: function(){
    _.bindAll(this, 'render', 'submit', 'valid','invalid');
    this.model = new SecurityUserModel();
    .....
}

关于u.bindAll，您可以看到：

编辑：>>>>>>>>>>>>

对不起，我没有完全理解你的意思。 你可以试试这个，我想这就是你想要的：

render: function(){
        $(this.el).append(Template);
        this.initform();
    },
.....
initform: function(){            
        this.form = {};
        this.form.username = $("#_user_username");
        this.form.email = $("#_user_email");
        this.form.password = $("#_user_password");
    },

---

没有其他更改

我认为问题在于，

表单：{…}

在调用

render

之前进行计算，而您查询的HTML元素是在

render

中创建的

也许您可以尝试在渲染函数的末尾执行此操作：

this.form = {
            "username": $("#_user_username")
            , "email": $("#_user_email")
            , "password": $("#_user_password")
        }

---

您没有以正确的方式使用选择器。执行以下操作时，需要将jQuery范围限定到视图：

invalidateForm: {
  "username": this.$("#_user_username"), 
  "email": this.$("#_user_email"),
  "password": this.$("#_user_password")
},

并且渲染必须以以下方式进行：

render: function(){
  this.$el.append(Template);
  this.invalidateForm();
},

---

也可以使用此选项。$el而不是$（this.el）为了获得更高效的性能，它是view元素的缓存版本。

您好，这已经解决了，但是没有另一个解决方案可以让表单在类中直接呈现在渲染之外，就像它最初的样子吗？@dev.pus：您必须保证DOM已完全加载（包括所有

id=“\u user…”

元素）在您的视图被解析之前。这是一个非常麻烦的问题。另外，带有ID选择器的jQuery调用不应该那么昂贵，缓存它们可能不会对您的应用程序产生任何明显的影响。@muistooshort:缓存不是直接的，而是我可以更轻松地更改选择器的选项（干式）@dev.pus：在这种情况下（这是明智的），只将选择器放在

表单中

，然后使用

$（this.form.username）

等等。是的，我同意@muistooshortHey，我查看了你的链接线程。它们似乎有类似的问题，但你的示例没有改变任何东西：(