0

我对.dotdotdot与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后，输入值改变后的值不再更新。

我是 Knockout 的新手，所以我想就我的问题寻求一些帮助。

4

2 回答 2

0

我创建了一个自定义绑定处理程序来解决这个问题：

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>
于 2017-07-10T14:48:44.253 回答
0

由于@combatc2 解决方案现在似乎不起作用，我为此创建了另一个自定义绑定，添加了一个显示更多/更少锚以在截断文本和原始文本（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

（请注意，该示例适用于 es6 版本的 Dotdotdot）

于 2019-03-22T09:29:43.467 回答