KnockoutJS in version 1826

Gavin_M_1 · ‎03-25-2015

I am currently developing an app using the Intel XDK using the jQuery UI Framework and KnockoutJS MVVM framework.

All had been progressing nicely until I upgraded to the version before 1826 (problem still exists in 1826) at which point click events bound to knockoutjs (version 3.3.0) no longer work in the emulator. Clicks still work in App Preview on my android phone and if I open index.html in a browser, just not in the emulator.

I've tried choosing non-cordova option on new project creation - no difference.

At this point it would be a lot of effort to not use knockoutjs but also very difficult to develop without the emulator, any help appreciated.

Dale_S_Intel · ‎03-25-2015

Could you post a simple test case that illustrates the problem? I'm not familiar with KnockoutJS, but if I have a reproducer I might be able to help.

Dale

Gavin_M_1 · ‎03-26-2015

Dale, thanks for your quick response. Here's a complete index.html file to show the problem: (knockoutjs can be downloaded at: http://knockoutjs.com/)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>

<body>
<div class="upage vertical-col" id="mainpage" data-role="page">
<div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
                   <button data-bind="click: resetData">Click test</button>
                   <strong data-bind="text: testStr">Knockout bind failed</strong>
</div>
</div>
</div>

       <script>
           function VM_Mainpage(){
               this.testStr = "Knockout bind worked";
               this.resetData = function() {
                   alert("Click test button pressed");
                };
           }
           ko.applyBindings(VM_Mainpage);
       </script>
</body>
</html>

Swati_S_Intel1 · ‎03-27-2015

Hello Gavin,

Your code works fine for me in the emulator with any template (App Designer or non-AD/ HTML5 or HTML5+ Cordova). Make sure your knockout.js is in the right location. Do you get any error message or the click is just ignored?

See the attached screenshot.

Swati

Gavin_M_1 · ‎03-31-2015

Swati,

Thanks for your reply - I can see from your image that the alert does indeed happen.

Knockoutjs file is included - I get the bind success message on screen. Any other idea why it might fail? I notice that I forgot to say that I'm running on linux.

I could try upgrading my windows boot XDK to 1826 (I haven't so far since it still works), but can I regress if it has the same problem?

Thanks Gavin

Gavin_M_1 · ‎04-02-2015

Swati,

I took the risk of upgrading to build 1878 on my Windows machine (took a backup that I may have been able to regress to), my code works fine in that environment.

I also upgraded my Linux machine to 1878 - that still fails with exactly the same code (in my dropbox - not copied) - so I assume that there is an issue in the Linux XDK emulator? For now I can develop in Windows but Linux is my preferred environment.

Thanks Gavin

Troy_B_ · ‎04-02-2015

Gavin,

I don't know if this will help. I imported my Phonegap Build project that used Knockout.js 3.3.0 and Jqm 1.4.5 onto XDK 1878 running on Win 8.1 and the knockout click bindings work on the emulator.