knockout.js – Page 2

Knockout.js: time input format and value restriction

December 25, 2023 by Tarik

Here is a thread with a few different techniques to keep the value numeric: https://groups.google.com/d/topic/knockoutjs/SPrzcgddoY4/discussion One option is to push this concern into your view model and create a numericObservable to use instead of a normal observable. It might look like: ko.numericObservable = function(initialValue) { var _actual = ko.observable(initialValue); var result = ko.dependentObservable({ read: function() … Read more

Knockout ‘flickering’ issue

December 23, 2023 by Tarik

Yes, it is very easy actually. Apply display:none to the top level div (or w/e container), and data-bind=”visible: true”. This will cause the page to be hidden until knockout unhides it via binding (which obviously can’t happen until its fully loaded). Since you are using a non-observable value, Knockout won’t even bother to re-check this … Read more

Knockout + Bootstrap 3 Radio Buttons

December 21, 2023 by Tarik

The bootstrap buttons and the knockout checked binding are still not playing nice: knockout uses the click event inside the checked binding to tigger the underlaying observable to change bootstrap subscribes on the click event to do the toggling but calls e.preventDefault() so KO won’t be notified about the click. One possible solution is to … Read more

How to add a dynamic class in knockoutjs?

December 20, 2023 by Tarik

You should use css binding instead of attr for this. Read more about it in the documentation: http://knockoutjs.com/documentation/css-binding.html. You code will look something like this: <span class=”cls1 cls2″ data-bind=”text: title, css: myClass” ></span> Here is working fiddle: http://jsfiddle.net/vyshniakov/gKaRF/

Knockout js – beforeRemove animation while adding items to observable array

December 17, 2023 by Tarik

Your function “addItem” is executed after 1 second (setInterval 1000 ms) so the “self.data” contains a new element while the animation fadeout is not complete (that’s require 3000 ms). That’s explicate your problem. To resolve this problem you must make the same interval for “addItem” as the “fadeout”, for your exemple it’s 3000. The code … Read more

Is it possible to mix HTML form input tags with SVG, or to use SVG to lay out a form?

December 16, 2023 by Tarik

You can use foreignObject. A small example : <?xml version=”1.0″ standalone=”yes”?> <svg xmlns = “http://www.w3.org/2000/svg” width=”100%” height=”100%”> <rect x=”25″ y=”25″ width=”250″ height=”200″ fill=”#ff0000″ stroke=”#000000″/> <foreignObject x=”50″ y=”50″ width=”200″ height=”150″> <body xmlns=”http://www.w3.org/1999/xhtml”> <form> <input type=”text”/> <input type=”text”/> </form> </body> </foreignObject> <circle cx=”60″ cy=”80″ r=”30″ fill=”#00ff00″ fill-opacity=”0.5″/> </svg> This is a standard SVG, but I added HTML … Read more

How to run code after Knockout JS has updated the DOM

December 13, 2023 by Tarik

Using the afterRender binding can help you. <ul data-bind=”foreach: { data:caseStudies, afterRender:checkToRunThirdPartyFunction }”> <li><a data-bind=”text: title, attr: { href: caseStudyUrl }”></a></li> </ul> function checkToRunThirdPartyFunction(element, caseStudy) { if(caseStudies.indexOf(caseStudy) == caseStudies().length – 1){ thirdPartyFuncToDoStuffToCaseStudyLinks(); } }

How to use ko.validation.group function

December 11, 2023 by Tarik

This worked well for me. Rather than grouping on this, create a proxy object that holds the properties you want validated. this.errors = ko.validation.group({ P1: this.P1, P2: this.P2, P3: this.P3 }); If you do this, consider using validatedObservable instead of group. Not only do you get the errors, but you can collectively check if all … Read more

Why am I getting a “Cannot read property ‘nodeType’ of null” error with Knockout JS?

December 10, 2023 by Tarik

If you set up your code like this, it’ll work. <body> <p>Number1:<input data-bind=”value:n1″></p> <p>Number2:<input data-bind=”value:n2″></p> <p>Number3:<input data-bind=”value:n3″></p> <script src=”https://stackoverflow.com/questions/15090015/knockout.js”></script> <script> function ViewModel() { var self = this; self.n1 = ko.observable(10); self.n2 = ko.observable(10); self.n3 = ko.observable(10); } ko.applyBindings(new ViewModel()); ` </script> </body>

Using keypress event in knockout JS

December 10, 2023 by Tarik

make sure query is an observable use valueUpdate=”afterkeydown” use event: { ‘keyup’: check }: Also I’d use console.log if possible as opposed to alert, and log the query so you can make sure the value is updating. 🙂 you also my want to log the event like this function check(data, event) { console.log(event); } that … Read more