0

jsTree のような Treeview を構築したいと考えています。ユーザーがリスト内のアイテムをクリックするたびに、含まれているすべてのファイルを表示するリーフが追加されます。

スクリーンショット ツリービュー

私の ViewModel プロパティ self.tree には、すべてのフォルダーとサブフォルダーを含む配列があります。葉を追加したいとき (フォルダをクリック)、プロパティの self.tree の構造は正しいのですが、observerbleArray が私の操作に反応していないようです。

これが私のViewModelです：

function TreeviewViewModel()
{
    var self = this;

    self.tree = ko.observableArray([
        {
            "data" : "C:/"
        }
    ]);

    self.expandBranch = function (item)
    {
        /* add leaf to clicked item -> observable does not react */

        item['leaf'] = [
                { "data" : "Documents" },
                { "data" : "Photos" },
                { "data" : "Videos" }
        ];
    }  

    console.log(self.tree());
}

私の財産に葉が含まれてconsole.log(self.tree());いることを証明します。self.treeしかし、私のビューはそれを示していません。

私の見解：

<script type="text/html" id="ULTemplate">
        <ul>
            <li>
                <ins class="item-icon" data-bind="click: $root.expandBranch"></ins>
                <a href="#" data-bind="text: data"></a>

                <!-- ko if: $data.hasOwnProperty("leaf") -->
                    <!-- ko template: { name: 'ULTemplate', foreach: leaf } -->
                    <!-- /ko -->
                <!-- /ko -->
            </li>
        </ul>
    </script>

   <div id="treeview" data-bind="template: { name: 'ULTemplate', foreach: tree }">

   </div>

私の見解が正しいことはわかっています。ダミーでテストしました：

dummy = [{
        "data": "C:/",
        "leaf": [
            { "data": "Documents" },
            { "data": "Photos" },
            { "data": "Videos" }
        ]
    }];

    self.tree(dummy);
4

1 に答える 1

1

これが実際の例です: http://jsfiddle.net/G5XJe/

私があなたのコードに加えた変更

<li> 
    <ins class = "item-icon"> </ins>
    <a href="#" data-bind="text: data, click: $root.expandBranch"></a >
    <!-- ko template: { name: 'ULTemplate', foreach: leaf } -->
    <!-- /ko -->
</li>

そして、これを JavaScript に。最初から葉のプロパティを追加し、それを監視可能な配列にしました。これにより、さらに項目を追加し、変更のノックアウトを通知できるようになります。

var self = this;
self.tree = ko.observableArray([{
    "data": "C:/",
    "leaf": ko.observableArray([])
}]);
self.expandBranch = function (item) {
    /* add leaf to clicked item -> observable does not react */

    item['leaf'].push({
        "data": "Documents",
        "leaf": ko.observableArray([])
    });
    item['leaf'].push({
        "data": "Photos",
        "leaf": ko.observableArray([])
    });
    item['leaf'].push({
        "data": "Videos",
        "leaf": ko.observableArray([])
    });
}

アップデート：

これを見て、アイテムを1回だけクリックできるようにするプロパティを追加しました：http://jsfiddle.net/G5XJe/1/

于 2013-10-30T15:47:50.333 に答える