Я хотел бы создать расширяемый/сбрасываемый div на основе содержимого внутри div. В принципе, если высота div> 50px, я бы хотел добавить ссылку, чтобы развернуть div, чтобы прочитать содержимое, а затем свернуть его.
У меня есть div, связанный с помощью Knockout. Я попробовал следующие параметры, и он не работал:
Каков наилучший способ обработки окончательного HTML после того, как KO завершил свои привязки.
пожалуйста, порекомендуйте
Вот мой 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
после рендеринга раздела. Страница документации, с которой я связан выше, описывает аргументы, переданные функции afterRender
.
Надеюсь, что ты им пользуешься.