您的位置：首页 > 其它

实例中this的困惑

2016-01-31 14:45 274 查看

这几日日实现avalon教程以及js插件中的实例时，对this产生了一些疑惑，经过实验好不容易清晰了些，在此记录，以备日后忘记时查询。

代码一：

var model=avalon.define({
$id:"test",
firstName:"司徒",
lastName:"正美",
arr:["aaa","bbb","ccc","ddd"],
name: {

get: function () {
return this.firstName+this.lastName//此处表示包含firstName，lastName等属性的这一个大对象，至于为何，我也不知，其实我本以为该this是指向name这一属性的
}
},

singleCheck: ["aaa","bbb"],
allCheck:false,
length:{

get:function(){
return this.singleCheck.length
}
},
allCheckClick: function () {
if (model.allCheck == true)
{model.singleCheck = model.arr;
console.log(this)//此处this表示全选的那个checkbox控件，因为是该控件的click事件被触发，进而该控件调用的allCheckClick方法，故this指向该控件}
else
model.singleCheck = [];
}

});

model.singleCheck.$watch("length", function () {
if (model.singleCheck.length==4)
model.allCheck = true
else
model.allCheck=false

})
model.$watch("firstName",function(){
model.name=model.firstName+model.lastName;

});
model.$watch("lastName", function () {
model.name = model.firstName + model.lastName;

});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="avalon.js"></script>
<script src="jquery-1.10.2.js"></script>
<script src="js.js"></script>
</head>
<body ms-controller="test">
<div>First name:<input type="text" ms-duplex-string="firstName"></div>
<div>Last name:<input type="text" ms-duplex-string="lastName"></div>
<div>Hello,<input type="text" ms-duplex="name"></div>
<div>{{firstName}}|{{lastName}}</div>
<ul>
<li><input type="checkbox" ms-duplex-checked="allCheck" ms-click="allCheckClick"/>全选</li>
<li ms-repeat="arr"><input type="checkbox" ms-value="el" ms-duplex="singleCheck">{{el}}</li>
</ul>
</body>
</html>

代码二：

function ellipsis() {
var o = this.data("pagination");
var self = this;
$ellipsis = $(".ellipse").click(function () {
var val =$(this) .parent().prev().text();
$(this).html("<input type='number' min='1' max='" + o.pages + "' >")
$("input").val(parseInt(val.valueOf()) + 1);
$("input").focus().keyup(function (e) {
if (e.which == 13)
selectPage.call(self, $(this).val() - 1);
else if (e.which == 27)
$ellipsis.html("...");

}).blur(function () {
if ($(this).val() != "")
selectPage.call(self, $(this).val() - 1  ) ;             else
$ellipsis.html("...");
//此处this指的是发生事件触发的那个控件的DOM，注意，是DOM，而非jquery对象。大概是由于一旦触发blur事件，就由相应DOM调用所定义的blur方法吧~，这一方法中的具体过程，是由我们自己定义的。

});});
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航