主干视图可以't访问jQuery选择器
Backbone views can't access jQuery selectors
我有一个处理注册组件的Backbone View,因为这需要大量的表单访问权限,所以我想到将表单选择器存储在对象属性中。
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将其用于)思考错误在哪里?
我认为问题是,在调用render
之前对form: {...}
进行求值,而您查询的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)以获得更高效的性能,它是视图元素的缓存版本。
这是一个上下文问题,您可以更新如下代码:
initialize: function(){
_.bindAll(this, 'render', 'submit', 'valid','invalid');
this.model = new SecurityUserModel();
.....
}
关于_.bindAll,您可以看到:主干网现在默认执行_.bindAll吗?https://stackoverflow.com/a/6396224/1303663
编辑:>>>>>>
对不起,我没有完全理解你的意思。你可以试试这个,我想这就是你想要的:
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");
},
没有其他更改
相关文章:
- 如何访问jquery中给定元素的上部和下部元素
- 访问JQuery中的vue-js变量
- 如何在循环期间访问 jquery getJson 调用 ($.getJson) 中的索引变量
- 使用require.js后,如何通过简单的脚本引用访问jquery全局命名空间
- 使用gulp和browserfy从脚本文件进程访问Jquery库
- 访问jquery.iviewer中的函数
- 访问jquery注释器注释
- Selenium Web驱动程序访问Jquery中的Javascript全局变量
- 访问jQuery中类的第二个成员
- 访问jQuery中Html编码的字段值
- 访问jQuery中的SVG数据元素
- 如何访问jQuery.each's”;这个“;在TypeScript中
- 主干视图可以't访问jQuery选择器
- 可以't访问jQuery加载的html的DOM
- 从 Angular 2 访问 jQuery 函数中设置的变量
- 使用 for 循环访问 jQuery ID
- 无法访问 jQuery AJAX 调用中的对象属性
- 如何访问 jQuery.post() 返回的对象
- 访问 Jquery 对象 [] 并得到错误
- 如何再次访问 jquery 函数