javascript 对knockout.js 中的模糊事件做出反应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16915887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React to blur event in knockout.js
提问by patel
I have an input textbox and whenever it loses focus I want to get its value text in a function.
我有一个输入文本框，每当它失去焦点时，我想在函数中获取它的值文本。
For example, if type "testimonials1", how could I get that text in an event handler for the blurevent?
例如，如果 type "testimonials1"，我如何在事件的事件处理程序中获取该文本blur？
This is what I tried. I get ProjectTestimonialas an object, not user-typed text.
这是我尝试过的。我得到的ProjectTestimonial是一个对象，而不是用户输入的文本。
HMTL
HMTL
<div class="ratingcontents" data-bind="foreach: ProjectTestimonial">
<!--ko if: !Testimonialstext-->
<input type="text" placeholder="Testimonials" class="txttestimonials"
data-bind="
text: Testimonialstext,
event: {
blur: $root.testimonialblurFunction.bind(SourceId, SourceText, Testimonialstext)
}
"
>
<!--/ko-->
</div>
JS
JS
self.testimonialblurFunction = function (data, event, Testimonialstext) {
debugger;
alert(data.soid + Testimonialstext);
}
回答by Gabriel Anderson
You can use event, that attaches to any JS event:
您可以使用附加到任何 JS 事件的事件：
<input name="id" data-bind="value: id, event: { blur: blurFunction }">
And in your view model:
在您的视图模型中：
self.blurFuncion = function(){
// this attacks when blur event occurs in input
}
Simple as that.
就那么简单。
回答by RodneyTrotter
The first mistake you made was using the 'text' binding on the input field, rather than the 'value' binding.
您犯的第一个错误是在输入字段上使用了“文本”绑定，而不是“值”绑定。
Regarding the event handler, I would not do this. I would use knockout's 'subscribe' functionality to listen for changes to the observable.
关于事件处理程序，我不会这样做。我会使用淘汰赛的“订阅”功能来监听 observable 的变化。
Here is a Jsfiddle version of your code.I have changed your markup to demonstrate more clearly.
这是您的代码的Jsfiddle 版本。我已经更改了您的标记以更清楚地展示。
HTML
HTML
<div class="ratingcontents" data-bind="foreach: ProjectTestimonial">
<input type="text" placeholder="Testimonials" class="txttestimonials"
data-bind="value: Testimonialstext" />
</div>
Javascript
Javascript
function viewModel(jsModel){
var self = this;
self.ProjectTestimonial = ko.utils.arrayMap(jsModel, function(item) {
return new testimonial(item);
});
}
function testimonial(jsTestimonial){
var self = this;
ko.mapping.fromJS(jsTestimonial, {}, self);
self.Testimonialstext.subscribe(function(){
alert(self.SourceId() + self.Testimonialstext());
});
}
var rawModel = [
{
SourceId: '1',
SourceText: 'Foo',
Testimonialstext: 'Ahoy there.'
},
{
SourceId: '2',
SourceText: 'Bar',
Testimonialstext: 'Blah blah blah'
}];
ko.applyBindings(new viewModel(rawModel));
回答by Akshat Jiwan Sharma
Use the has focusbinding instead. From what I understand you want the data in the text box once the user stops editing. This is simple enough. Check out this example from the knockout js documentation page.
改用有焦点绑定。据我了解，一旦用户停止编辑，您希望文本框中的数据。这很简单。从淘汰赛 js 文档页面查看此示例。
<p>
Hello <b data-bind="text:name"></b> </p>
<input data-bind="value: name, hasfocus: editing" />
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>
View model
查看模型
function PersonViewModel(name) {
// Data
this.name = ko.observable(name);
this.editing = ko.observable(false);
// Behaviors
this.edit = function() { this.editing(true) }
}
ko.applyBindings(new PersonViewModel("Bert Bertington"));
