敲除 toggle/expand 单击文本时的文本

Question

使用敲除将数据绑定到 html table。其中一列的大文本长度为 200.. 并且 UI 刚刚滚动了很长时间。所以只想显示前 20 个长度的字符并单击 ... 它应该展开或折叠文本。所以刚刚在下面创建了一个模板，

 <script type="text/html" id="templateLongText">
        <span data-bind="text: (Comments.length > 20 ? Comments.substring(0, 20) + '<a href=\'#\' data-bind=\'click: toggle(Comments)\'>...</a>' : Comments)"></span>
    </script>

它不起作用事件，只是呈现与上面相同的文本。

编辑：如何在单击 ...

时切换展开或折叠文本（评论值）

Answer 1

您不能将 html 标记作为绑定中的文本实现。

 <script type="text/html" id="templateLongText">
    <span data-bind="text: Comments.length > 20 ? Comments.substring(0, 20) : Comments"> </span><a href="#" data-bind="click: function(){ toggle(Comments) }, visible: Comments.length > 20">...</a>
</script>

Answer 2

您可以为此添加一个自定义绑定，您可以将其绑定到任何简单的（可观察的）字符串。此自定义绑定：

最初添加两个子元素。（缩写）文本的跨度和切换的锚点。
在每次更新时（如果文本不可观察，则仅更新一次）在 span 中设置缩写文本并添加用于切换文本的 onclick 处理程序。对于少于 20 个字符的文本，切换锚是隐藏的。

ko.bindingHandlers.expandText = {
  init: function(element, valueAccessor) {
    element.appendChild(document.createElement('span'));
    var toggle = document.createElement('a');
    toggle.appendChild(document.createTextNode("..."));
    toggle.href = "#";
    element.appendChild(toggle);
  },
  update: function(element, valueAccessor) {
    var text = ko.unwrap(valueAccessor());
    var textElement = element.getElementsByTagName('span')[0];
    var toggle = element.getElementsByTagName('a')[0];
    var collapsed = true;
    toggle.onclick = function() {
      collapsed = !collapsed;
      ko.utils.setTextContent(textElement, collapsed ? text.substr(0, 20) : text);
    }
    toggle.style.display = text.length > 20 ? 'inline' : 'none';
    ko.utils.setTextContent(textElement, collapsed ? text.substr(0, 20) : text);
  }
};

ko.applyBindings({
  sample1: '1234567890123456789012345',
  sample2: '123456789012345',
  sample3: '123456789012345678901234567890'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="expandText: sample1"></div>
<div data-bind="expandText: sample2"></div>
<div data-bind="expandText: sample3"></div>

敲除 toggle/expand 单击文本时的文本

knockout toggle/expand the text on click of text

html

knockout.js

knockout-mvc

knockout-binding-handlers