Question

Knockout是否可以在页面上的文本区域和DIV之间进行“实时”绑定，每次textarea的内容发生变化（每个字符的字符）时更新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>

Answer 1

value绑定有一个名为valueUpdate的配套选项，您可以将其设置为包含其他事件，例如：

data-bind="value: CommentTextPlain, valueUpdate: 'afterkeydown'"

Answer 2

使用valueUpdate绑定

请参阅http://knockoutjs.com/documentation/value-binding.html

上的其他参数部分

valueUpdate

如果你的绑定还包含一个名为valueUpdate的参数，那么这个   定义KO应该用来检测更改的其他浏览器事件   除了改变事件。以下字符串值最多   通常有用的选择：


“keyup” - 在用户释放密钥时更新您的视图模型

“keypress” - 在用户键入密钥时更新您的视图模型。   与keyup不同，这会在用户按住键时重复更新

“afterkeydown” - 在用户开始时立即更新您的视图模型   输入一个字符。这可以通过捕获浏览器的keydown事件来实现   并异步处理事件。在这些选项中，

“afterkeydown”是您想要保留视图模型的最佳选择   实时更新。


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

Answer 3

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

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

当我在textarea中输入时，KnockoutJS绑定到div

3 个答案: