如何将当前对象绑定到文本输入

How to bind current object to text input?

本文关键字：绑定 文本 输入 对象      更新时间：2023-09-26

消息模型

function MessageModel(content) {
    var self = this;
    self.content = content;
}

RoomViewModel

self.currentMessage = ko.observable(new MessageModel(""));
self.addMessage = function () {
    self.messages.push(self.currentMessage());
    self.currentMessage(new MessageModel(""));
};

查看

<form data-bind="submit: addMessage">
    <input data-bind='value: currentMessage.content, valueUpdate: "afterkeydown"' />
    <button id="ButtonSendMessage" type="submit">Send</button>
</form>

当用户在输入框中键入内容时，希望更新当前消息内容属性，当我单击"添加"时，希望添加currentMessage内容。但是内容总是空白的。

也许因为内容不是可观察的，并且值绑定是错误的，因为currentMessage是可观察的所以要绑定的任何属性都必须像currentMessage().prop一样，或者在元素上下文中使用with: currentMessage绑定，请尝试这样的操作：

function MessageModel(content) {
    var self = this;
    self.content = ko.observable(content);
}

我还建议你使用textInput绑定：

 <form data-bind="submit: addMessage">
    <input type="text" data-bind='textInput: currentMessage().content' />
    <button id="ButtonSendMessage" type="submit">Send</button>
</form>

text输入绑定：

textInput绑定将文本框（）或文本区域（）与视图模型属性链接，从而在视图模型属性和元素值之间提供双向更新。与值绑定不同，textInput从DOM为所有类型的用户输入提供即时更新，包括自动完成、拖放和剪贴板事件。

参考：TextInput绑定

相关文章：