Jquery dom manipulation with knockout

Jquery dom manipulation with knockout

本文关键字：knockout with manipulation dom Jquery      更新时间：2023-09-26

我想创建一个可扩展/可折叠的div基于div内的内容。基本上，如果div的高度是> 50px，我想添加一个链接来扩展div阅读内容，然后折叠它。

我有一个使用Knockout绑定的div。我尝试了以下选项，但它不起作用:

  1. 在文档中使用jquery脚本。准备好了，找不到元素
  2. 使用自定义KO绑定init和update。这不起作用，因为我的div的高度总是返回为0。

在KO完成绑定后，操作最终HTML的最佳方法是什么?

请通知

这是我的html

<div data-bind="foreach: notes" class="coment_div">
    <div class="mycontainer" data-bind="collapseUI:true">
        <p class="date_custome" data-bind="text:formattedDate"></p>
        <p class="comment">
            <span data-bind="text:comment"></span>
        </p>
        <p class="read-more"></p>
    </div>
</div>
这是我的jquery脚本 
var slideHeight = 50;
$(".myContainer").each(function() {
    var $this = $(element);
    var $wrap = $this.children(".comment");
    var defHeight = $wrap.height();
    if (defHeight >= slideHeight) {
        var $readMore = $this.find(".read-more");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<a href='#'>Read More...</a>");
        $readMore.children("a").bind("click", function(event) {
            var curHeight = $wrap.height();
            if (curHeight == slideHeight) {
                $wrap.animate({
                    height: defHeight
                }, "normal");
                $(this).text("Collapse");
                $wrap.children(".gradient").fadeOut();
            } else {
                $wrap.animate({
                    height: slideHeight
                }, "normal");
                $(this).text("Read More...");
                $wrap.children(".gradient").fadeIn();
            }
            return false;
        });
    }
});

阅读文档中的afterRender/afterAdd选项。

基本上，它看起来像这样(基于你的代码)

<div data-bind="foreach: { data: notes, afterRender: addReadMoreWidget }" 
     class="coment_div">
    ...
</div>

addReadMoreWidget函数将在渲染section后被调用。我上面链接到的文档页详细说明了传递给afterRender函数的参数。

希望对你有用。

相关文章：