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});

コレクションに要素を追加します。

しかし、ツリーノードのクリックイベントは発生しません。ツリーはjqueryオブジェクトをサポートしていないため、単純に生のhtmlをツリーノードに追加しています。get 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ため、文字列を返し、(DOM オブジェクトである) を文字列に変換するとすぐに、イベント処理のために Back が接続する はなくなります: no TreeNode、no events.eldelegateeldelegate

いくつかのオプションが表示されます。

  1. 呼び出し後にノード<span>を掘り出し、ビューに再アタッチするために使用します。#nodesaddTosetElementTreeNode

  2. 構造を再配置して、まったく持たないようTreeNodeにします。ノード s にクラスをアタッチすると、すべてのイベントを処理<span>できます。TreeZoneたとえば、<span class="node">ノードに使用した場合、次のようになりますTreeZone。

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

    の代わりにselectNodeon のメソッドが必要です。からモデルにバックトラックできるように、に属性を追加する必要がある場合があります。TreeZoneTreeNodedata-id<span><span>

また、newItem.remove();ingetHtmlは決して実行されないことに注意してください。

于 2013-01-11T20:43:25.673 に答える