[英]knockout toggle/expand the text on click of text
Binding data into html table using knockout.使用淘汰赛将数据绑定到 html 表中。 One of the column has large text 200 length.. and UI just got scroll long.其中一列的大文本长度为 200.. 并且 UI 刚刚滚动很长。 So just want to show, first 20 length chars and click of, ...
it should expand or collapse the text.所以只想显示,前 20 个长度的字符并单击...
它应该展开或折叠文本。 so just created a template below,所以刚刚在下面创建了一个模板,
<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>
It does not work event, just rendering same text as above.它不起作用事件,只是呈现与上面相同的文本。
Edit: How toggle the expand or collapse text(Comments value) on click of ...
编辑:如何在单击...
切换展开或折叠文本(评论值)
You can't implement html tag as a text in binding.您不能在绑定中将 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>
You could add a custom binding for this, which you can bind to any simple (observable) string.您可以为此添加自定义绑定,您可以将其绑定到任何简单(可观察的)字符串。 This custom binding:此自定义绑定:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.