Knockout.JS如何绑定dom元素绑定

Posted 2023-03-27

【中文标题】Knockout.JS如何绑定dom元素绑定

【英文标题】：Knockout.JS How to bind dom element bind

【发布时间】：2013-01-23 14:08:43

【问题描述】：

我想绘制在 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]

如何绑定元素数据？

【参考方案1】：

html 绑定期望 html 内容为文本。要让绑定接受 DOM 元素，我认为您需要自定义绑定 - 例如（在此处使用 jquery 进行 dom 操作）：

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

【参考方案2】：

或者您可以像这样简单地更新 observable：

var html = $(appendSubCategories(categoryList)).html();
self.categoryTree(html);

【讨论】：

是的，这行得通，但是为什么要将所有这些元素放在 DOM 中而不是只使用 html 文本呢？直接使用这些元素（如 Grim 所示）或仅创建一个 html 字符串（请参阅我的答案）

其实我有点同意。我赞成格里姆的回答。也就是说，如果您查看 OP 的代码，他实际上从未将元素插入 DOM。所以 AFAIK 这里没有真正的性能损失。

【参考方案3】：

将 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>";