Skip to content

sumeru.event(dispalced by touch.js)

einsteinhx edited this page Dec 26, 2013 · 1 revision

touch.js与Clouda结合设计思路

1.保留session.event方式的事件绑定方法。

session.event('externalBlock', function(){

	var delBtns = rootBlock.querySelector('#ext').querySelectorAll('.del');
			
	Array.prototype.forEach.call(delBtns, function(delBtn){
		delBtn.onclick = function(){
			//var smrid = this.parentNode.getAttribute('data-smrid');
			var name = this.parentNode.querySelector('.name').innerText;
			session.extStudent.destroy({"name" : name});
			session.extStudent.save();
		}
	});
});

2.新增基于block的tpl-id的事件代理绑定方法(函数风格) 通过改进touch.js的on方法,将block子元素中的事件代理到block上进行处理。

  • 可以避免重复的事件绑定,并减少内存使用,从而优化性能
  • 简化的API,减少代码量。
var handler = function(event){
        var name = this.parentNode.querySelector('.name').innerText;
	session.extStudent.destroy({"name" : name});
	session.extStudent.save();
}

sumeru.event.on('externalBlock', '.del', handler);
sumeru.event.off('externalBlock', '.del', handler);

3.新增基于block的tpl-id的事件代理绑定方法(面向DOM, jQuery-like风格)

$$('tpl-id').on('click', '.del', function(){
        var name = this.parentNode.querySelector('.name').innerText;
	session.extStudent.destroy({"name" : name});
	session.extStudent.save();
});

或者

$$('.del').click(function(){
        var name = this.parentNode.querySelector('.name').innerText;
	session.extStudent.destroy({"name" : name});
	session.extStudent.save();
});

此方法需要包装Node($$),其他事件库采用此方式,如QuoJS,Hammer...