Question

这是我的骨干视图方案

var TreeNode = Backbone.View.extend({
        tagName : "span",
        className : "ndelem dirnode",
        events : {
            "click" : "selectNode",
        },
        initialize : function() {
            _.bindAll(this, "render", "selectNode");
            $(this.el).append(this.model.get("fname")).attr({
                "data-cid" : this.model.cid
            });

        },
        render : function() {
            this.delegateEvents();
            return this;
        },

        selectNode : function(e) {
            e.stopPropagation();

            this.model.set({
                isOpened : true
            });
        }
    });

主视图

var TreeZone = Backbone.View.extend({
        el : $("#nodes"),
        initialize : function() {
            this.collection.bind("add", this.list, this);
        },      
        getHtml : function(elem) {
            var newItem = $("<div/>").append(elem);
            return newItem.html();
            newItem.remove();
        },
        getSelectedItem : function() {
            var selectedItem = $('#nodes').jqxTree('selectedItem');
            if (selectedItem != null)
                return selectedItem.element;
            else {
                var treeItems = $('#nodes').jqxTree('getItems');
                var firstItem = treeItems[0];
                return firstItem.element;
            }
        },
        list : function(file) {

            var node = new TreeNode({
                model : file
            });
            var newItem = this.getHtml(node.render().el);

            var element = this.getSelectedItem();

            $('#nodes').jqxTree('addTo', {
                html : newItem,
            }, element);
            $('#nodes').jqxTree('expandItem', element); 
        }
    });

var tree = new TreeZone({collection:dircollection});

我在集合中添加了元素。

但树节点单击事件未触发。我只是将原始html添加到树节点，因为树不支持jquery对象。所以我正在尝试从获取html函数获取html。并把它交给树。

Answer 1

事件绑定到DOM元素，但最终使用HTML字符串。你这样做了：

getHtml : function(elem) {
    var newItem = $("<div/>").append(elem);
    return newItem.html();
    newItem.remove();
},

//...
var newItem = this.getHtml(node.render().el);

所以getHTML会返回一个字符串，只要您将TreeNode的{{1}}（这是一个DOM对象）转换为字符串，delegate就会返回附加到el的事件处理已经消失：没有el，没有事件。

我可以看到几个选项：

在delegate电话结束后从挖掘节点的#nodes，并使用setElement将其重新附加到addTo视图。
重新排列结构，使您根本没有TreeNode。如果您将一个类附加到节点TreeNode，那么您可以让处理所有事件;例如，如果您使用TreeZone作为节点，那么就可以拥有：
```
TreeZone
```
您在events: { 'click .node': 'selectNode' }而不是selectNode上有TreeZone方法。您可能需要向TreeNode添加data-id属性，以便您可以从回溯到模型。

另请注意，中的newItem.remove();永远不会被执行。

为什么我的简单骨干视图点击事件没有触发？

1 个答案: