0

通常问题是我在 Control 中的单击操作不起作用。

在下面的代码中，您可以看到当我使用 Observe.List 生成带有项目的列表时的情况，因此当列表中自动出现新元素时它会更新（见下文），并且它是在 init func 的第一个控件中生成的。

同样在第一个控件中，当将新元素放在列表中时，我将控件附加到它的“{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;

});
4

1 回答 1

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 使用的每个变量。

于 2013-09-20T09:11:55.053 回答