在knockout.js中对模糊事件做出反应

Question

我有一个输入文本框,每当它失去焦点时,我想在函数中获取其值文本.

例如,如果是type "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);
}

Answer 1

您可以使用附加到任何JS事件的事件:

<input name="id" data-bind="value: id, event: { blur: blurFunction }">

在您的视图模型中:

self.blurFuncion = function(){
    // this attacks when blur event occurs in input
}

就那么简单.

Answer 2

你犯的第一个错误就是在输入字段上使用'text'绑定,而不是'value'绑定.

关于事件处理程序,我不会这样做.我会使用knockout的'subscribe'功能来监听observable的变化.

这是你的代码的Jsfiddle版本.我已经更改了你的标记以更清楚地展示.

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));