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

时间:2013-09-14 21:13:27

标签: javascript list canjs canjs-control canjs-list

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

});

1 个答案:

答案 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的每个变量。