canjs 在渲染后为 Observe.List 中的元素附加控件答案

【问题标题】：canjs attach Control for element in Observe.List after rendercanjs 在渲染后为 Observe.List 中的元素附加控件
【发布时间】：2013-09-14 21:13:27
【问题描述】：

通常问题是我在 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;

});

【问题讨论】：

第二个控件是否绑定到列表的元素？
它绑定到一个元素而不是所有列表。

标签： javascript list canjs canjs-control canjs-list

【解决方案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 使用的每个变量。

【讨论】：