Uncaught Error: Unable to parse bindings.\nMessage: ReferenceError: technology_name is not defined;\nBindings value: text: technology_name, click: $parent.loadSubSection \n<\/code><\/pre>\nI can verify that the data is loaded but the knockout binding doesn’t seem to work properly. Could anyone please help me out ?. My code is like follows :<\/p>\n
Index.html<\/strong><\/p>\n \n \n \n\n \n\n \n \n \n \n Our Workplace\n\n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n\n \n \n\n \n\n function loadedPanel(what) {\n \/\/We are going to set the badge as the number of li elements inside the target\n $.ui.updateBadge(\"#aflink\", $(\"#af\").find(\"li\").length);\n }\n\n\n function unloadedPanel(what) {\n console.log(\"unloaded \" + what.id);\n }\n\n if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {\n var script = document.createElement(\"script\");\n script.src = \"libs\/appframework\/plugins\/af.desktopBrowsers.js\";\n var tag = $(\"head\").append(script);\n }\n\n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \/* This function runs once the page is loaded, but appMobi is not yet active *\/\n \/\/$.ui.animateHeaders=false;\n var search = document.location.search.toLowerCase().replace(\"?\", \"\");\n \/\/if(!search)\n \/\/$.os.useOSThemes=false;\n\n if (search) \/\/Android fix has too many buggy issues on iOS - can't preview with $.os.android\n {\n\n $.os.useOSThemes = true;\n if (search == \"win8\")\n $.os.ie = true;\n $.ui.ready(function () {\n $(\"#afui\").get(0).className = search;\n });\n }\n\n var webRoot = \".\/\";\n \/\/ $.os.android=true;\n $.ui.autoLaunch = false;\n $.ui.openLinksNewTab = false;\n \/\/$.ui.resetScrollers=false;\n\n\n $(document).ready(function () {\n $.ui.launch();\n\n });\n\n \/* This code is used to run as soon as appMobi activates *\/\n var onDeviceReady = function () {\n AppMobi.device.setRotateOrientation(\"portrait\");\n AppMobi.device.setAutoRotate(false);\n webRoot = AppMobi.webRoot + \"\";\n \/\/hide splash screen\n AppMobi.device.hideSplashScreen();\n $.ui.blockPageScroll(); \/\/block the page from scrolling at the header\/footer\n\n };\n document.addEventListener(\"appMobi.device.ready\", onDeviceReady, false);\n\n function showHide(obj, objToHide) {\n var el = $(\"#\" + objToHide)[0];\n\n if (obj.className == \"expanded\") {\n obj.className = \"collapsed\";\n } else {\n obj.className = \"expanded\";\n }\n $(el).toggle();\n\n }\n\n\n if ($.os.android || $.os.ie || search == \"android\") {\n $.ui.ready(function () {\n $(\"#main .list\").append(\"<\/code><\/pre>\nToggle Theme Color<\/code><\/li>\n\");\n var $el = $(\"#afui\");\n $(\"#toggleAndroidTheme\").bind(\"click\", function (e) {\n if ($el.hasClass(\"light\"))\n $el.removeClass(\"light\");\n else\n $el.addClass(\"light\");\n });\n });\n }\n \n\n\n\n \n .samplecode {\n background: #ccc;\n color: #000;\n border-radius: 10px;\n padding: 10px;\n margin-bottom: 10px;\n margin-top: 10px;\n }\n\n \/* for the grid demo *\/\n .grid > div {\n border: 1px dashed black;\n }\n \n\n\n \n \n \n\n \n jQuery.noConflict();\n console.log(\"Resolved JQEURY Conflicts...\");\n \n\n\n \n \n \n\n \n \n\n \n \n \n \n \n App Framework\n\n
\n
\n \n <\/pre>\nStarting app<\/code><\/h1>\n\n\n \n \n \n \n\n\n \n \n Our WorkPlace\n
\n
\n \n <\/pre>\nLoading Data...<\/code><\/h1>\n\n \n\n \n \n\n \n
\n \n ![\"\"](\"images\/main_menu\/icon-our-workplace.png\")
\n\n \n ![\"\"](\"images\/main_menu\/icon-building-essentials.png\")
\n\n \n ![\"\"](\"images\/main_menu\/icon-technology.png\")
\n\n \n ![\"\"](\"images\/main_menu\/icon-help.png\")
\n \n ![\"\"](\"images\/main_menu\/icon-whats-on.png\")
\n \n ![\"\"](\"images\/main_menu\/icon-idea.png\")
\n \n \n \n\n\n\n\n\n \n\n \n Technology Inner\n <\/pre>\n
<\/ul>\n
\n \n\n\n<\/pre>\nTechnology.js Javascript file<\/strong><\/code><\/p>\n \/** The technology related view model*\/\n \/\/console.log(\"Self Initialised the page...\");\nvar viewModel = new TechnologyViewModel(); ;\n(function(){\n\n jQuery(document).on(\"pageinit\", function () {\n ko.applyBindings(viewModel);\n console.log(\"Bound technology View Model...\");\n });\n\n })();\n\n\n \/\/Technology View Model\n function TechnologyViewModel(){\n self = this;\n\n \/*Functon Loading the Technology Subsection By Id*\/\n self.loadSubSection = function(technologyItem) {\n\n\n var subSectionid = parseInt(technologyItem.technology_item_id); \n switch (subSectionid)\n { \n\n case 1: \n localStorage.clear();\n localStorage.setItem('technology_object', JSON.stringify(technologyItem));\n \/\/ $.mobile.changePage(\"working_wirelessly.html\",{transition: 'slide'});\n break;\n\n case 2: \n localStorage.clear();\n localStorage.setItem('technology_object', JSON.stringify(technologyItem)); \n \/\/ $.mobile.changePage(\"printer_setup.html\",{transition: 'slide'});\n break;\n\n case 3:\n localStorage.clear();\n localStorage.setItem('technology_object', JSON.stringify(technologyItem));\n \/\/ $.mobile.changePage(\"mobile_hotspot.html\",{transition: 'slide'});\n break;\n\n case 4:\n localStorage.clear();\n localStorage.setItem('technology_object', JSON.stringify(technologyItem));\n \/\/$.mobile.changePage(\"blackberry_z10.html\",{transition: 'slide'});\n break;\n\n case 5:\n localStorage.clear();\n localStorage.setItem('technology_object', JSON.stringify(technologyItem));\n \/\/$.mobile.changePage(\"desk_phone.html\",{transition: 'slide'});\n break;\n\n }\n }\n\n\n \/*\n Function For Fetching all the 'Technology' Specific data \n *\/ \n self.fetchScreenData = ko.computed(function(){\n console.log(\"Getting Technology Screen Data From File\");\n\n jQuery.ajax({\n type: \"GET\", \n url: \"data\/Appdata.json\", \n contentType: \"application\/json\",\n success: function (result) {\n console.log(\"SUCCESS: \");\n \/*\n Parsing Raw data to JSON\n *\/\n var data = JSON.parse(result);\n\n \/*\n Map only the [app basic] and the [technology]\n array content to the screen\n *\/\n var mapping = { 'observe': [\"app_basic\",\"technology\"] }; \n ko.mapping.fromJS(data,mapping,self);\n\n \/*\n Function fetching the Technology Screen Header\n *\/\n self.getTechScreenHeader = ko.dependentObservable(function() {\n\n return ko.utils.arrayFilter(self.app_basic(), function(appScreen) {\n return appScreen.app_screen_id == 3;\n });\n\n }, self); \n },\n error: function (result) {\n alert(\"error loading app json data\");\n }\n });\n\n console.log(\"GOT Technology Screen Data From File\");\n },self);\n\n\n\n}\n<\/code><\/code><\/pre>\nAlso I am using the following JSON file to load the json data and map them automagically using the knockout-mapping plugin.<\/p>\n
\"technology\" : [\n {\n \"technology_description\" : \"Bla\"\n \"technology_item_id\" : \"1\",\n \"technology_name\" : \"bla bla\",\n \"technology_subject\" : \"bla bla\",\n \"technology_video_desc\" : \"null\",\n \"technology_video_link\" : \"null\",\n \"technology_video_thumbnail\" : \"null\"\n },\n {\n \"technology_description\" : \"Bla\"\n \"technology_item_id\" : \"2\",\n \"technology_name\" : \"bla bla\",\n \"technology_subject\" : \"bla bla\",\n \"technology_video_desc\" : \"null\",\n \"technology_video_link\" : \"null\",\n \"technology_video_thumbnail\" : \"null\"\n },\n {\n \"technology_description\" : \"Bla\"\n \"technology_item_id\" : \"3\",\n \"technology_name\" : \"bla bla\",\n \"technology_subject\" : \"bla bla\",\n \"technology_video_desc\" : \"null\",\n \"technology_video_link\" : \"null\",\n \"technology_video_thumbnail\" : \"null\"\n },\n\n ],\n<\/code><\/pre>\nI am just using the standard index.html configuration found on the appframework itself for importing the headers.<\/p>\n
Originally posted 2013-12-05 09:42:16. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I am developing an appframework based mobile application using knockout js for data binding. I keep getting the following error message on my browser console : Uncaught Error: Unable to parse bindings. Message: ReferenceError: technology_name is not defined; Bindings value: text: technology_name, click: $parent.loadSubSection I can verify that the data is loaded but the knockout […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1941","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1941"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1941\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}