Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug in extenders documentation #461

Closed
mikegleasonjr opened this issue May 2, 2012 · 6 comments
Closed

Bug in extenders documentation #461

mikegleasonjr opened this issue May 2, 2012 · 6 comments

Comments

@mikegleasonjr
Copy link

@mikegleasonjr mikegleasonjr commented May 2, 2012

In the page:
http://knockoutjs.com/documentation/extenders.html

In the section "Live Example 1: Forcing input to be numeric"

If we leave an input blank or with only whitespaces, NaN is appearing in the input.

2 fixes in the extender are required:

  • in the "newValueAsNum" declaration and
  • in the condition near: "target.notifySubscribers(valueToWrite);"

Here's the full code fixed:

ko.extenders.numeric = function(target, precision) {
   //create a writeable computed observable to intercept writes to our observable
   var result = ko.computed({
      read: target,  //always return the original observables value
      write: function(newValue) {
         var current = target(),
            roundingMultiplier = Math.pow(10, precision),
            newValueAsNum = !/\S/.test(newValue) || isNaN(newValue) ? 0 : parseFloat(newValue),
            valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

         //only write if it changed
         if (valueToWrite !== current) {
            target(valueToWrite);
         } else {
            //if the rounded value is the same, but a different value was written, force a notification for the current field
            if (newValue !== current) {
               target.notifySubscribers(valueToWrite);
            }
         }
      }
   });

   //initialize with current value to make sure it is rounded appropriately
   result(target());

   //return the new computed observable
   return result;
};

Thanks

@rniemeyer
Copy link
Member

@rniemeyer rniemeyer commented May 2, 2012

Thanks for reporting this one. I just committed a fix for it. I did parseFloat(+newValue) to handle blank/whitespace and fixed the equality check on the last part as you had suggested.

@rniemeyer rniemeyer closed this May 2, 2012
@mikegleasonjr
Copy link
Author

@mikegleasonjr mikegleasonjr commented May 3, 2012

Nice trick, the parseFloat(+newValue)

Thank you for this awesome library...

@stijnherreman
Copy link
Contributor

@stijnherreman stijnherreman commented Jun 29, 2016

@rniemeyer +newValue gives you a number, while parseFloat takes a string, so when using this code in a TypeScript environment, it refuses to compile. I also found a question on SO questioning this change.

While it's just an example, it's up there on the official site, so I think the code should be correct.

@rniemeyer
Copy link
Member

@rniemeyer rniemeyer commented Jun 29, 2016

@stijnherreman - I'll work on getting this updated

@stijnherreman
Copy link
Contributor

@stijnherreman stijnherreman commented Jul 1, 2016

@rniemeyer great, thanks. Hope I didn't come off too strong there :)

@rniemeyer
Copy link
Member

@rniemeyer rniemeyer commented Jul 1, 2016

@stijnherreman - no problem. The code was wrong. I believe it was originally just parseFloat and we needed to handle empty strings and strings with just spaces as well (isNaN(" ") is false) and I added the + without realizing that the parseFloat was then unnecessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants