通常问题是我在 Control 中的单击操作不起作用。
在下面的代码中，您可以看到当我使用 Observe.List 生成带有项目的列表时的情况，因此当列表中自动出现新元素时它会更新（见下文），并且它是在 init func 的第一个控件中生成的。
同样在第一个控件中，当将新元素放在列表中时，我将控件附加到它的“{files} add”方法以用于新生成的元素。
问题是在第二个控件中单击事件将不起作用。我认为这是因为我尝试在自动重新生成 Observe.List 完成之前这样做。证据是 jquery 还没有元素。
是否可以在通过自动重新生成 Observe.List 渲染之前附加 Contol ( '{files} add' )？我应该如何以正确的方式在新元素上设置控制？我可以以某种方式做到这一点吗？
define(['canjs/can',
'text!platform/presenter/views/file_list.ejs',
'platform/presenter/file',
'platform/presenter/show',],
function(can,EjsFileList,ControlFile,ControlShow){
var file_list = can.Control({
},{
'init': function(){
"use strict";
can.view.ejs('EjsFileList',EjsFileList);
can.view( "EjsFileList", {
files : this.options.files
}, $.proxy( function( fragment ) {
this.element.html( fragment );
},this));
},
'{files} add': function(list,event ,added){
list.forEach($.proxy(function(el){
console.log($('#file-' + el.id));
// HERE IS PROBLEM
//[context: document, selector: "#file-80", jquery: "1.9.1", constructor: function, init: //function…]
//context: document
//selector: "#file-80"
//__proto__: Object[0]
new ControlFile('#file-' + el.id ,{
'file': el,
'files': list
});
},this));
},
'{files} remove': function(a,b,removed){
removed.forEach(function(element){
$('#file-' + element.id).remove();
});
}
});
return file_list;
});
列表视图：
<% files.each(function(file){ %>
<li id="file-<%= file.id %>" <%= (el) -> can.data(el, 'file', file) %> class="<%= file.attr('public')? '' : ' private ' %>">
<img class="loading" />
</li>
<% }); %>
列表元素的控件。这里有问题！
define(['canjs/can',
'platform/model/file',
'platform/presenter/show',
'text!platform/presenter/views/file.ejs',
],
function(can, modelFile,ControlShow,EjsFile){
var list = can.Control({
defaults: {
loaderClass: 'loading',
model: modelFile
}
},{
'init': function(){
"use strict";
console.log(this.element);
//[context: document, selector: "#file-73", jquery: "1.9.1", constructor: function, init: function…]
},
'img click': function(){
console.log('should work but never gets here');
}
});
return list;
});