Tuesday 15 January 2013

knockout.js - Knockoutjs not updating UI in this case -


I'm relatively new to (starting 2 days earlier) and was trying some simple examples. Currently, I'm having trouble with this piece of code

  & lt; Div id = "idChangeStyle" & gt; & Lt; Span data-bind = "style: {background: GetAge (" 18 "'red': 'white'}" & gt; Enter your age: & lt; / Span & gt; & Lt; Input type = "text" data-bind = "value: getage" & gt; & Lt; / Input & gt; & Lt; / Div & gt;   
  function ageViewModel () {var self = this; Self.age = ko.observable (18); Self.GetAge = ko.computed ({read: function () {return self.age ();}, write: function (value) {value = parseInt (string). Replace (/ [^ \ d] / g , "")); If (INNA (value) self.age (18); and self.age (value);}}); }; Ko.applyBindings (New Age ViewModel (), document.getElementById ('idChangeStyle')); Actually, the app only takes one input (age); I'm using writeable INTEGER to parse the input and calculate writing if I am trying to set its NAN in my default value of 18. Apart from this, I have a simple argument on html where I am changing the background of spin to red if the age is below 18.  

It works fine in normal condition, here it is when I get the problem: -

  Episode 1: Enter current input: 18 (initial case) * 4 * then tab / / enter * a * then tab / / (for default 18) work / * a * tab / / 2 does not work case 2: current input: 18 enter * a * tab then * / / * Does not work   

I checked the knockout code to see what happens in a case after the part of the code Land: -

  if (IsNaN (value)) self.age (18);   

.. In the following line: -

  // writes that if the value has not changed, (if ([[[EqualityComparer] Overview)  <,  _latestValue  and  duplicate [0]   

/ code> has the same value (18), so it's something Not even because there is no change in age value, now the void property and UI are out of sync

Is it because I am doing this wrong? < P>

The problem is that if you have a value of If they enter the same value, then it does not consider the change in value and does not inform customers if you have entered the error state several times, then 18 first set There will be no change and no set-up is done.

With this, to determine this, you have to manually inform customers that you can see that ValueHasMutated () viewable on call

  self.GetAge = ko.computed ({read: function () {return self.age} ();}, write: function (value) {value = parseInt (string ( Value) .replace (/ [^ \ d] / g, "")); If (isNaN (value)) self.age (18); And self.age (value); Self.age.valueHasMutated (); // notify subscribers}});    

No comments:

Post a Comment