我有一个输入文本框,每当它失去焦点时,我想在函数中获取其值文本。
例如,如果键入"testimonials1"
,我怎样才能在blur
事件的事件处理程序中获取该文本?
这就是我尝试过的。我将ProjectTestimonial
作为对象,而不是用户输入的文本。
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
self.testimonialblurFunction = function (data, event, Testimonialstext) {
debugger;
alert(data.soid + Testimonialstext);
}
答案 0 :(得分:22)
您可以使用附加到任何JS事件的事件:
<input name="id" data-bind="value: id, event: { blur: blurFunction }">
在您的视图模型中:
self.blurFuncion = function(){
// this attacks when blur event occurs in input
}
这很简单。
答案 1 :(得分:7)
你犯的第一个错误就是在输入字段上使用'text'绑定,而不是'value'绑定。
关于事件处理程序,我不会这样做。我会使用knockout的'subscribe'功能来监听对observable的更改。
这是一个Jsfiddle version of your code.我已经更改了你的标记以更清楚地展示。
HTML
<div class="ratingcontents" data-bind="foreach: ProjectTestimonial">
<input type="text" placeholder="Testimonials" class="txttestimonials"
data-bind="value: Testimonialstext" />
</div>
的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));
答案 2 :(得分:0)
请改用has focus绑定。根据我的理解,一旦用户停止编辑,您就想要文本框中的数据。这很简单。从knockout 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>
查看模型
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"));