一般的に問題は、Control でのクリック アクションが機能しないことです。
以下のコードでは、Observe.List を使用してアイテムを含むリストを生成したときの状況を確認できるため、リストに新しい要素が自動的に発生すると更新され (以下を参照)、init 関数の最初のコントロールで生成されます。
また、最初のコントロールでは、新しい要素がリストに追加されると、新しく生成された要素の「{files} add」メソッドにコントロールを追加します。
問題は、2 番目のコントロールのクリック イベントが機能しないことです。自動再生成 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;
});