0

ノックアウトバインディングを使用してJSで生成されたカテゴリツリーを描画したいのですが、DOM要素でバインディングできません。

<div id="category_list" data-bind="html:categoryTree">
    List Area   
</div>

// JS

function appendSubCategories(categories) {
    var container = document.createElement("ul");
    $.each(categories, function (i, category) {
        var currentNode = document.createElement("li");
        var span = document.createElement("span");
        span.setAttribute("style", "margin-left: 2px");
        span.className = "folder";
        span.appendChild(document.createTextNode(category.Name));
        currentNode.appendChild(span);

        if (category.Subfolders.length > 0) {
            currentNode.appendChild(appendSubCategories(category.Subfolders));
        }
        container.appendChild(currentNode);
    });
    return container;
}

function CategoryViewModel() {
    var self = this;
    self.categoryTree =ko.observable(); 

    $(function () {
        $.getJSON("/Admin/Category/getCategoryList", function (categoryList) {
            self.categoryTree(appendSubCategories(categoryList));

            //self.categoryTree("<p>This is working</p>);
            //$("#category_list").html(categoryTree);

            $(".folder").click(function () {
                console.log(this);
            });
        });


    });
}// End CategoryViewModel
ko.applyBindings(new CategoryViewModel());

上記のコードを実行すると、次のように出力されます。

[オブジェクトHTMLUListElement]

Elementデータとバインドするにはどうすればよいですか？

4

3 に答える 3

4

htmlバインディングは、htmlコンテンツをテキストとして想定しています。バインディングにDOM要素を受け入れさせるには、カスタムバインディングが必要だと思います-たとえば（ここでdom操作にjqueryを使用）：

ko.bindingHandlers.element = {
    update: function(element, valueAccessor) {
    var elem = ko.utils.unwrapObservable(valueAccessor());
    $(element).empty();
    $(element).append(elem);
}

そしてそれを次のように使用します：

<div data-bind="element: categoryTree"></div>

カスタムバインディングの詳細については、http：//knockoutjs.com/documentation/custom-bindings.htmlをご覧ください。

于 2013-02-07T22:27:57.087 に答える
1

appendSubCategoriesを次のように置き換えます。

function appendSubCategories(categories) {
    var container = "<ul>";
    $.each(categories, function (i, category) {
        container += '<li><span class="folder" style="margin-left: 2px;">' + category.Name + '</span>';
        if (category.Subfolders.length > 0) {
            container += appendSubCategories(category.Subfolders);
        }
        container += '</li>';
    });
    return container + "</ul>";
}
于 2013-02-07T22:34:15.383 に答える
1

または、次のようにオブザーバブルを更新することもできます。

var html = $(appendSubCategories(categoryList)).html();
self.categoryTree(html);
于 2013-02-07T22:53:32.900 に答える