Javascript 淘汰-在属性更改时通知

我尝试使用敲除，比如

WPF-MVVM

在

WPF

中，有一个选项可以在属性更改时通知虚拟机。
例如：如果我有一个文本框，我可以使用

UpdateSourceTrigger=PropertyChanged

在每次单击时通知VM

<Grid DataContext="MyVM">
    <TextBox Text="{Binding Path=Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</Grid>

查看：

function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");

this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
}, this);


}

ko.applyBindings(new AppViewModel());

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

名字：

姓氏：

全名：

我正在尝试但没有成功，在文本框中更新

全名

，单击输入（而不是onblur）

编辑：

function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");

this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
}, this);


}

ko.applyBindings(new AppViewModel());

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

代码运行良好。 我只希望lastname在firstname/lastname文本框中写入时更新

现在它已在模糊上更新，在编写时不会更新。

您的代码在逻辑上很好，问题在于在

capitallastname

函数中错误使用了

此

在您的情况下，

此

关键字指函数所属的对象，如果函数不属于任何对象，但不属于视图模型对象，则该关键字指的是

窗口

对象。这就是为什么在大多数KnockoutJS示例中我们使用

var self=this，以获取对视图模型对象的引用


检查以下SO问题，以便更好地理解：



更新

为了在编写firstname/lastname文本框时更新视图，只需将
valueUpdate:'afterkeydown'
添加到绑定中即可

发件人：

价值更新

如果绑定还包括一个名为valueUpdate的参数，则
定义KO应用于检测更改的其他浏览器事件
除了变化事件。以下字符串值是最重要的
常用的选择：

“afterkeydown”-用户一开始就更新视图模型
键入字符。这是通过捕捉浏览器的keydown事件来实现的
以及异步处理事件

您的代码在逻辑上很好，您的问题在于在
capitalizeLastName
函数中错误使用了
此

在您的情况下，
此
关键字指函数所属的对象，如果函数不属于任何对象，但不属于视图模型对象，则该关键字指的是
窗口
对象。这就是为什么在大多数KnockoutJS示例中我们使用
var self=this，以获取对视图模型对象的引用


检查以下SO问题，以便更好地理解：



更新

为了在编写firstname/lastname文本框时更新视图，只需将
valueUpdate:'afterkeydown'
添加到绑定中即可

发件人：

价值更新

如果绑定还包括一个名为valueUpdate的参数，则
定义KO应用于检测更改的其他浏览器事件
除了变化事件。以下字符串值是最重要的
常用的选择：

“afterkeydown”-用户一开始就更新视图模型
键入字符。这是通过捕捉浏览器的keydown事件来实现的
以及异步处理事件

为了更改输入的更新模式，您建议在knockout中有一些内置的方法来完成此操作

请参见以下参考：

特别是关于值更新的部分

在这种情况下，您可以使用
valueUpdate:'afterkeydown'
来更新绑定

在这个实例中需要更改的只是绑定

<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

名字：

姓氏：

全名：

盖帽

更新了JSFIDLE:
以更改输入的更新模式，正如您所建议的，在knockout中有一些内置的方法来实现这一点

请参见以下参考：

特别是关于值更新的部分

在这种情况下，您可以使用
valueUpdate:'afterkeydown'
来更新绑定

在这个实例中需要更改的只是绑定

<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

名字：

姓氏：

全名：

盖帽

更新的JSFIDLE:
我看不出当前代码有任何错误。我已经把它放在小提琴上了，它的工作原理和预期的一样。也许您可以进一步解释您遇到的问题。代码运行良好。我只想在firstname/lastname文本框中写入时更新lastname。现在它是在模糊上更新的，在写的时候没有更新。我明白了，这更有意义。添加了一个描述如何执行此操作的答案。我看不出当前代码有任何错误。我已经把它放在小提琴上了，它的工作原理和预期的一样。也许您可以进一步解释您遇到的问题。代码运行良好。我只想在firstname/lastname文本框中写入时更新lastname。现在它是在模糊上更新的，在写的时候没有更新。我明白了，这更有意义。添加了一个描述如何执行此操作的答案computed函数通过使用（
函数
，
此绑定
）方法调用绑定计算中的
此
值。因此，
此
绑定正确。代码工作正常。我只想在firstname/lastname文本框中写入时更新lastname。现在它在Blur上更新了，在写作时没有更新。谢谢@Gary.s。我将答案更新为指向
capitallastname
函数，而不是
computed
函数。computed函数使用（
function
，
this binding
）方法调用将
this
值绑定到computed中。因此，
此
绑定正确。代码工作正常。我只想知道你的姓