0

这是我的主干视图场景

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。并将其交给树。

4

1 回答 1

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's el（这是一个 DOM 对象）转换为一个字符串，delegateBack 附加到el事件处理的那个就消失了：没有delegate，没有事件。

我可以看到几个选项：

  1. 在调用后挖掘节点并用于<span>将其重新附加到视图。#nodesaddTosetElementTreeNode

  2. 重新排列结构，使你根本没有TreeNode。如果您将一个类附加到节点<span>s 那么您可以让TreeZone处理所有事件；例如，如果您用于<span class="node">节点，那么TreeZone可以有这个：

    events: {
    'click .node': 'selectNode'
}

    你会有一个selectNode方法 onTreeZone而不是TreeNode. 您可能需要向 s 添加一个data-id属性，<span>以便您可以从 回溯<span>到模型。

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

于 2013-01-11T20:43:25.673 回答