Плагин jQuery dotdotdot отключает привязки кнококутов

Question

У меня проблема с .dotdotdot Плагин JQuery используется с KnockoutJS, У меня похожая структура:

<div class="dotdotdot">
    <h3 data-bind="text: Text"></h3>
</div>
<input data-bind="value: Text"/>
<button data-bind="click: someThingsThatTriggerDotdotdotFunction"/>    

Проблема в том, что когда dotdotdot функция вызывается на элемент HTML с классом dotdotdot тогда обязательное отношение нарушается.

$('.dotdotdot').dotdotdot({});

После приведенного выше выполнения кода значение h3 больше не обновляется после изменения входного значения.

Я новичок в нокауте, поэтому я хотел бы попросить некоторую помощь по моей проблеме.

Answer 1

Я создал собственный обработчик привязки, чтобы обойти эту проблему:

ko.bindingHandlers.dotDotDot = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var value = allBindingsAccessor().dotDotDot.Value;

        $(element).html(value());

        var dotdotdot = $(element).parent().truncate(options);

        allBindingsAccessor().dotDotDot.Value.subscribe(function (newValue) {
            $(element).html(newValue);
            dotdotdot.trigger("update.dot");
        });
    }
};

<div class="announcement-container">
    <div data-bind="dotDotDot: { Value: Announcement, height: 80 }"></div>
</div>

Answer 2

Поскольку решение @ battlec2 в настоящее время, похоже, не работает, я создал для этой цели еще одну настраиваемую привязку, добавив привязку show more / less для переключения между усеченным и исходным текстом (Dotdotdot v5.0.4 (es6), Knockout v3.5.0).

<div data-bind="dotdotdot: myObservable, maxHeight:250, moreLess: true"></div>

ko.bindingHandlers["dotdotdot"] = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    let valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
    const maxHeight = allBindingsAccessor().maxHeight || 100;
    const moreLess = allBindingsAccessor().moreLess || false; //show more/less anchor

    function addMoreLess(val) {
      if (val != null && moreLess)
        val += '<a class="ddd-toggle d-none ddd-keep" href="#"></a>';
      return val;
    }
    valueUnwrapped = addMoreLess(valueUnwrapped);
    if (valueUnwrapped == null) valueUnwrapped = "";
    var options = {
      height: maxHeight,
      watch: "window", //"window" avoids recalculating  the truncation after adding show more/less anchor.
      keep: ".ddd-keep" // preserve these elements (for show more/less anchor)
    };

    $(element).html(valueUnwrapped);
    var ddd = new Dotdotdot(element, options); //es6 version

    //show more/less anchor handler
    $(element).on("click", ".ddd-toggle", function(e) {
      e.preventDefault();
      if ($(element).hasClass("ddd-truncated")) {
        ddd.restore();
        $(element).addClass("ddd-full-story");
      } else {
        $(element).removeClass("ddd-full-story");
        ddd.truncate();
        ddd.watch();
      }
    });

    //we put the 'update' callback code in a computed here so it gets the 'ddd' Dotdotdot instance)
    ko.computed({
      read: function() {        
        var text = ko.utils.unwrapObservable(valueAccessor());        
        ddd.API.unwatch();
        text = addMoreLess(text);
        $(element).html(text);
        //we need to update the originalContent (no API method here)
        ddd.originalContent = ddd._getOriginalContent();
        ddd.API.truncate();
        ddd.API.watch();
      },
      disposeWhenNodeIsRemoved: element
    });

  }
}

CSS для якоря "показать больше / меньше":

.d-none{display:none;}
.ddd-truncated .ddd-toggle,
.ddd-full-story .ddd-toggle{
    display: inline !important;
}
.ddd-toggle:before {
    content: '[ Show more ]';
}
.ddd-full-story .ddd-toggle:before {
    content: '[ Show less ]';
}

Рабочий пример: https://codepen.io/raguchi/pen/VRVwqx

(обратите внимание, что пример работает с версией Dotdotdot для es6)