2016-07-20 9 views
0

私は、2つのプロパティtitleとpriceMaxを持つモデル 'search parameters'を持っていますが、どちらも必須です。ユーザーがプロパティを変更すると、APIからのオファーのスクリプト更新数。モデル 'searchParameters'にエラーがない場合、更新が実行されます。モデルにcountエラーを返すmetodhに問題があります。 titleとpriceMaxに値がある場合、メソッドの戻り値0を再度モデルのプロパティを変更したときにのみ、メソッドがエラーを返します。これが私の解決です。ノックアウト検証変更後の購読更新

HTML

<fieldset> 
     <div class="row"> 
     <label>Title:</label> 
     <input type="text" data-bind="textInput: searchParameters.title" /> 

     </div> 

     <div class="row"> 
     <label>Price max:</label> 
     <input data-bind="textInput: searchParameters.priceMax" /> 

     </div> 
     <div class="row"> 
     <label>count offers:</label> 
     <span data-bind="text: countOffers"></span> 
     </div> 
     <div class="row" data-bind="visible:visibleProgress"> 
     progress... 
     </div> 
    </fieldset> 

JS

function ViewModel() { 
    var self = this; 
    self.countOffers = ko.observable(0); 
    self.visibleProgress = ko.observable(false); 
    ko.extenders.refreshCountOffers = function(target, timeout) { 
    var timerId = null; 
    target.subscribe(function(newValue) { 
     console.log(self.errors()); 
     if (self.errors().length === 0) { 
     clearTimeout(timerId); 
     timerId = setTimeout(function() { 
      self.visibleProgress(true); 
      //mock api 
      $.ajax({ 
      url: '/echo/js/?js=' + Math.floor((Math.random() * 100)), 
      data: { 
       delay: 2 
      }, 
      complete: function(response) { 
       self.countOffers(response.responseText); 
       self.visibleProgress(false); 
      } 
      }); 
      //mock api 
     }, 500); 
     } else 
     self.countOffers(0); 
    }); 
    return target; 
    }; 
    self.searchParameters = { 
    title: ko.observable().extend({ 
     refreshCountOffers: 500 
    }).extend({ 
     required: true 
    }), 
    priceMax: ko.observable().extend({ 
     refreshCountOffers: 500 
    }).extend({ 
     required: true 
    }) 
    }; 
    self.errors = ko.validation.group(self.searchParameters); 
}; 

var model = new ViewModel(); 
ko.applyBindings(model); 

jsfiddle

答えて

0

これはあなたの適用される順序によるものですエクステンダ。 Observableを拡張すると、各エクステンダーは、前のものの結果に対して連続して実行されます。

したがって、オリジナルの(変更をサブスクライブする場所)にコードを拡張し、オブザーバブルを再度拡張して必要なものにします。

私はknockout-validationはあなたが見るの行動を引き起こしている観察可能なソースにやっていることは100%を確認していないが、あなたが(this jsFiddleのように)ごエクステンダーの順序を逆ならば、カスタムエクステンダがすることを保証正直に言うと、 「最終的な」観察可能な状態で動作するので、期待どおりに動作します。

self.user = { 
    firstName: ko.observable().extend({ 
    required: true, 
    refreshCountOffers: 500 
    }), 
    lastName: ko.observable().extend({ 
    required: true, 
    refreshCountOffers: 500 
    }) 
}; 
関連する問題