JQuery дом манипуляции с нокаутом

0

Я хотел бы создать расширяемый/сбрасываемый div на основе содержимого внутри div. В принципе, если высота div> 50px, я бы хотел добавить ссылку, чтобы развернуть div, чтобы прочитать содержимое, а затем свернуть его.

У меня есть div, связанный с помощью Knockout. Я попробовал следующие параметры, и он не работал:

  1. Используемый сценарий jquery в document.ready, он не может найти элементы
  2. Используемые пользовательские привязки KO с инициализацией и обновлением. Это не работает, потому что моя высота div возвращается как 0 все время.

Каков наилучший способ обработки окончательного 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;
        });
    }
});
Теги:
knockout.js

1 ответ

1
Лучший ответ

Ознакомьтесь с параметрами afterRender/afterAdd в документации.

В принципе, это будет выглядеть примерно так (на основе вашего кода)

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

Функция addReadMoreWidget после рендеринга раздела. Страница документации, с которой я связан выше, описывает аргументы, переданные функции afterRender.

Надеюсь, что ты им пользуешься.

  • 0
    Очень интересно, я не читал эту часть документа!
  • 1
    Knockout - одна из тех библиотек, которая входит в стандартную комплектацию "но подождите, это еще не все!" встроенный. :-)
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню