3

是否可以在 Knockout 中在文本区域和页面上的 DIV 之间进行“实时”绑定，每次文本区域的内容更改（每个字符的字符）时都会更新 DIV？我在我的视图模型上使用了一个计算字段，但它不会更新 DIV，除非我关闭 textarea：是否可以在每次进行更改时立即更新它，而不必关闭标签？

代码

function EditModel() {
        this.CommentTextPlain = ko.observable("");

        var self = this;

        this.CommentReady = ko.computed(function () {
            return self.CommentTextPlain().replace(regex, "<BR>");
        });
    }

    function ApplyViewmodel() {
        model = new EditModel();
        ko.applyBindings(model, document.getElementById("mainContainer"));
    }

<div id="mainContainer">
    <div id="target" data-bind='html: CommentReady' class="commentEditBox"></div> 

    <textarea data-bind="value: CommentTextPlain" rows="20" cols="62" id="editBoxFull">    </textarea>

</div>
4

3 回答 3

6

该value绑定有一个名为的伴随选项valueUpdate，您可以将其设置为包括其他事件，例如：

data-bind="value: CommentTextPlain, valueUpdate: 'afterkeydown'"
于 2013-03-07T19:03:46.040 回答
2

使用valueUpdate绑定

请参阅http://knockoutjs.com/documentation/value-binding.html上的附加参数部分

价值更新

如果您的绑定还包含一个名为 valueUpdate 的参数，则这定义了 KO 应该使用的其他浏览器事件来检测除了更改事件之外的更改。以下字符串值是最常用的选择：

  • "keyup" - 当用户释放一个键时更新你的视图模型
  • "keypress" - 当用户输入一个键时更新你的视图模型。与 keyup 不同，这会在用户按住键时重复更新
  • “afterkeydown” - 一旦用户开始输入字符，就会更新您的视图模型。这是通过捕获浏览器的 keydown 事件并异步处理事件来实现的。在这些选项中，
  • 如果您想实时更新视图模型，“afterkeydown”是最佳选择。

在这些选项中，如果您想实时更新视图模型，“afterkeydown”是最佳选择

于 2013-03-07T19:04:01.813 回答
0

Knockout 有一个textInput绑定，可以实现即时模型更新，而无需对值绑定使用其他参数，同时还可以处理剪切粘贴和文本拖动事件。

这是 textInput 绑定文档的链接：http: //knockoutjs.com/documentation/textinput-binding.html。

于 2015-02-23T23:28:23.707 回答