0

使用敲除将数据绑定到 html 表中。其中一列的大文本长度为 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>

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

编辑：如何在点击时切换展开或折叠文本（评论值）...

4

2 回答 2

2

您不能将 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>
于 2019-12-05T15:15:25.770 回答
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>

于 2019-12-06T14:33:30.947 回答