knockout.js - Getting Knockout Binding to work with Appframework -
i developing appframework based mobile application using knockout js data binding.
i keep getting following error message on browser console :
uncaught error: unable parse bindings.
message: referenceerror: technology_name not defined;
bindings value: text: technology_name, click: $parent.loadsubsection
i can verify data loaded knockout binding doesn't seem work properly. please me out ?. code follows :
index.html
<!doctype html> <html> <head> <!-- <script type="text/javascript" src="libs/cordova/cordova.js"></script> --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta http-equiv="pragma" content="no-cache"> <title>our workplace</title> <!-- loading appframework libraries --> <!-- appframework styles --> <link rel="stylesheet" type="text/css" href="libs/appframework/css/icons.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/main.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/appframework.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/android.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/win8.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/bb.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/ios.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/ios7.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/badges.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/buttons.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/lists.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/forms.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/css/src/grid.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/plugins/css/af.actionsheet.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/plugins/css/af.popup.css" /> <link rel="stylesheet" type="text/css" href="libs/appframework/plugins/css/af.selectbox.css" /> <!-- appframework scripts --> <script type="text/javascript" charset="utf-8" src="libs/appframework/appframework.js"></script> <!-- google maps plugin --> <!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=en"></script>--> <script> function loadedpanel(what) { //we going set badge number of li elements inside target $.ui.updatebadge("#aflink", $("#af").find("li").length); } function unloadedpanel(what) { console.log("unloaded " + what.id); } if (!((window.documenttouch && document instanceof documenttouch) || 'ontouchstart' in window)) { var script = document.createelement("script"); script.src = "libs/appframework/plugins/af.desktopbrowsers.js"; var tag = $("head").append(script); } </script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.actionsheet.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.css3animate.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.passwordbox.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.scroller.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.selectbox.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.touchevents.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.touchlayer.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.popup.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/ui/src/appframework.ui.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/ui/transitions/all.js"></script> <script type="text/javascript" charset="utf-8" src="libs/appframework/plugins/af.slidemenu.js"></script> <script type="text/javascript"> /* function runs once page loaded, appmobi not yet active */ //$.ui.animateheaders=false; var search = document.location.search.tolowercase().replace("?", ""); //if(!search) //$.os.useosthemes=false; if (search) //android fix has many buggy issues on ios - can't preview $.os.android { $.os.useosthemes = true; if (search == "win8") $.os.ie = true; $.ui.ready(function () { $("#afui").get(0).classname = search; }); } var webroot = "./"; // $.os.android=true; $.ui.autolaunch = false; $.ui.openlinksnewtab = false; //$.ui.resetscrollers=false; $(document).ready(function () { $.ui.launch(); }); /* code used run appmobi activates */ var ondeviceready = function () { appmobi.device.setrotateorientation("portrait"); appmobi.device.setautorotate(false); webroot = appmobi.webroot + ""; //hide splash screen appmobi.device.hidesplashscreen(); $.ui.blockpagescroll(); //block page scrolling @ header/footer }; document.addeventlistener("appmobi.device.ready", ondeviceready, false); function showhide(obj, objtohide) { var el = $("#" + objtohide)[0]; if (obj.classname == "expanded") { obj.classname = "collapsed"; } else { obj.classname = "expanded"; } $(el).toggle(); } if ($.os.android || $.os.ie || search == "android") { $.ui.ready(function () { $("#main .list").append("<li><a id='toggleandroidtheme'>toggle theme color</a></li>"); var $el = $("#afui"); $("#toggleandroidtheme").bind("click", function (e) { if ($el.hasclass("light")) $el.removeclass("light"); else $el.addclass("light"); }); }); } </script> <style> .samplecode { background: #ccc; color: #000; border-radius: 10px; padding: 10px; margin-bottom: 10px; margin-top: 10px; } /* grid demo */ .grid > div { border: 1px dashed black; } </style> <!-- loading jquery libraries --> <script type="text/javascript" src="libs/jquery.core/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="libs/jquery-mobile/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript"> jquery.noconflict(); console.log("resolved jquery conflicts..."); </script> <!-- loading knockout js content --> <script type="text/javascript" src="libs/knockoutjs/knockout-2.2.1.js"></script> <script type="application/javascript" src="libs/knockoutjs/mapping/knockout.mapping-latest.js"></script> <!-- loading view models --> <script type="text/javascript" src="logic/technology.js"></script> </head> <body> <div id="afui" class=""> <!-- splashscreen see. --> <div id="splashscreen" class='ui-loader heavy'> app framework <br> <br> <span class='ui-icon ui-icon-loading spin'></span> <h1>starting app</h1> </div> <div id="header"> <a id='menubadge' onclick='af.ui.togglesidemenu()' class='menubutton'></a> </div> <!-- splashscreen see. --> <div id="div2" class='ui-loader heavy'> our workplace <br> <br> <span class='ui-icon ui-icon-loading spin'></span> <h1>loading data...</h1> </div> <div id="content"> <div title='our workplace' id="main" class="panel" selected="true" data-load="loadedpanel" data-unload="unloadedpanel" data-tab="navbar_home"> <div class="dash-widgts"> <p class="dashboard-icons"> <a> <img src="images/main_menu/icon-our-workplace.png" alt="" /></a> <a class="evn"> <img src="images/main_menu/icon-building-essentials.png" alt="" /></a> <a href="#technologymain" data-transition="slide" title="technology"> <img src="images/main_menu/icon-technology.png" alt="" /></a> <a class="evn"> <img src="images/main_menu/icon-help.png" alt="" /></a> <a> <img src="images/main_menu/icon-whats-on.png" alt="" /></a> <a class="evn" href="templates/idea/idea_suggesstion.html"> <img src="images/main_menu/icon-idea.png" alt="" /></a> </p> </div> </div> </div><!--/conent --> <div title="technology" id="technologymain" class="panel"> <span id="span1">technology inner</span> <ul id="technologyitems" class="list"> <li> <a data-bind="text: technology_name, click: $parent.loadsubsection"></a> </li> </ul> </div> </body> </html> technology.js javascript file
/** technology related view model*/ //console.log("self initialised page..."); var viewmodel = new technologyviewmodel(); ; (function(){ jquery(document).on("pageinit", function () { ko.applybindings(viewmodel); console.log("bound technology view model..."); }); })(); //technology view model function technologyviewmodel(){ self = this; /*functon loading technology subsection id*/ self.loadsubsection = function(technologyitem) { var subsectionid = parseint(technologyitem.technology_item_id); switch (subsectionid) { case 1: localstorage.clear(); localstorage.setitem('technology_object', json.stringify(technologyitem)); // $.mobile.changepage("working_wirelessly.html",{transition: 'slide'}); break; case 2: localstorage.clear(); localstorage.setitem('technology_object', json.stringify(technologyitem)); // $.mobile.changepage("printer_setup.html",{transition: 'slide'}); break; case 3: localstorage.clear(); localstorage.setitem('technology_object', json.stringify(technologyitem)); // $.mobile.changepage("mobile_hotspot.html",{transition: 'slide'}); break; case 4: localstorage.clear(); localstorage.setitem('technology_object', json.stringify(technologyitem)); //$.mobile.changepage("blackberry_z10.html",{transition: 'slide'}); break; case 5: localstorage.clear(); localstorage.setitem('technology_object', json.stringify(technologyitem)); //$.mobile.changepage("desk_phone.html",{transition: 'slide'}); break; } } /* function fetching 'technology' specific data */ self.fetchscreendata = ko.computed(function(){ console.log("getting technology screen data file"); jquery.ajax({ type: "get", url: "data/appdata.json", contenttype: "application/json", success: function (result) { console.log("success: "); /* parsing raw data json */ var data = json.parse(result); /* map [app basic] , [technology] array content screen */ var mapping = { 'observe': ["app_basic","technology"] }; ko.mapping.fromjs(data,mapping,self); /* function fetching technology screen header */ self.gettechscreenheader = ko.dependentobservable(function() { return ko.utils.arrayfilter(self.app_basic(), function(appscreen) { return appscreen.app_screen_id == 3; }); }, self); }, error: function (result) { alert("error loading app json data"); } }); console.log("got technology screen data file"); },self); } also using following json file load json data , map them automagically using knockout-mapping plugin.
"technology" : [ { "technology_description" : "bla" "technology_item_id" : "1", "technology_name" : "bla bla", "technology_subject" : "bla bla", "technology_video_desc" : "null", "technology_video_link" : "null", "technology_video_thumbnail" : "null" }, { "technology_description" : "bla" "technology_item_id" : "2", "technology_name" : "bla bla", "technology_subject" : "bla bla", "technology_video_desc" : "null", "technology_video_link" : "null", "technology_video_thumbnail" : "null" }, { "technology_description" : "bla" "technology_item_id" : "3", "technology_name" : "bla bla", "technology_subject" : "bla bla", "technology_video_desc" : "null", "technology_video_link" : "null", "technology_video_thumbnail" : "null" }, ], i using standard index.html configuration found on appframework importing headers.
i have working example @ home if still needing this. couldn't find 1 made work myself. can post later.
Comments
Post a Comment