通常问题是我在Control中的点击操作不起作用。
在下面的代码中,您可以看到当我使用Observe.List生成包含项目的列表时的情况,因此当新元素自动出现在列表上时会更新(见下图)并且它在init func中的第一个Control中生成。
同样在第一个控件中当新元素放在列表中时,我将控件附加到'{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;
});
答案 0 :(得分:0)
我找到了解决方案。
如果您在canjs中使用动态列表并希望在每个元素上附加Control,则应创建如下视图:
<% files.each(function(file){ %>
<li id="file-<%= file.id %>" <%= (el) -> can.data(el, 'file', file) %>
<%= function(element){ new ControlFile(element, {file: file}); } %>>
<img class="loading" />
</li>
<% }); %>
如您所见,我在列表上设置了Control,但我需要传递以查看Control using的每个变量。