挖空 单击文本时切换/展开文本

Question

使用挖空将数据绑定到 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>

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

编辑： 如何在单击...时切换展开或折叠文本(注释值(

Answer 1

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

• 最初添加两个子元素。(缩写(文本的范围和用于切换的锚点。
在
• 每次更新时(如果文本不可观察，则仅一次(在范围中设置缩写文本，并添加用于切换文本的 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>

Answer 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>