canjs прикрепляет элемент управления для элемента в Observe.List после рендера

Question

Обычно проблема в том, что мое действие по щелчку в Control не работает.

В приведенных ниже кодах вы можете видеть ситуацию, когда я генерирую список с элементами, используя Observe.List, поэтому он обновляется, когда новый элемент появляется в списке автоматически (см. Ниже), и генерируется в первом элементе управления в функции init.

Также в первом элементе управления Когда новые элементы помещаются в список, я присоединяю элемент Control к его методу {files} add для нового сгенерированного элемента.

Проблема в том, что во втором контрольном клике событие не сработает. Я думаю, потому что я пытаюсь сделать это до того, как автоматическая регенерация Observe.List будет закончена. Доказательством является то, что jquery еще не элемент.

Возможно ли, что я присоединяю Contol ('{files} add') до его рендеринга с помощью автоматического регенерирования Observe.List? Как правильно настроить контроль над новым элементом? Могу ли я сделать это как-то ввиду?

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;

});

Answer 1

Я нашел решение.

Если вы используете динамический список в 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.