Getting Knockout Binding to work with Appframework-Collection of common programming errors
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 binding doesn’t seem to work properly. Could anyone please help me out ?. My code is like follows :
Index.html
Our Workplace
function loadedPanel(what) {
//We are going to set the badge as the number of li elements inside the 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);
}
/* This function runs once the page is loaded, but appMobi is not yet active */
//$.ui.animateHeaders=false;
var search = document.location.search.toLowerCase().replace("?", "");
//if(!search)
//$.os.useOSThemes=false;
if (search) //Android fix has too many buggy issues on iOS - can't preview with $.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();
});
/* This code is used to run as soon as 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 the page from scrolling at the 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("Toggle Theme Color");
var $el = $("#afui");
$("#toggleAndroidTheme").bind("click", function (e) {
if ($el.hasClass("light"))
$el.removeClass("light");
else
$el.addClass("light");
});
});
}
.samplecode {
background: #ccc;
color: #000;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
/* for the grid demo */
.grid > div {
border: 1px dashed black;
}
jQuery.noConflict();
console.log("Resolved JQEURY Conflicts...");
App Framework
Starting app
Our WorkPlace
Loading Data...
Technology Inner
Technology.js Javascript file
/** The technology related view model*/
//console.log("Self Initialised the 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 the Technology Subsection By 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 For Fetching all the 'Technology' Specific data
*/
self.fetchScreenData = ko.computed(function(){
console.log("Getting Technology Screen Data From File");
jQuery.ajax({
type: "GET",
url: "data/Appdata.json",
contentType: "application/json",
success: function (result) {
console.log("SUCCESS: ");
/*
Parsing Raw data to JSON
*/
var data = JSON.parse(result);
/*
Map only the [app basic] and the [technology]
array content to the screen
*/
var mapping = { 'observe': ["app_basic","technology"] };
ko.mapping.fromJS(data,mapping,self);
/*
Function fetching the 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 From File");
},self);
}
Also I am using the following JSON file to load the json data and map them automagically using the 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 am just using the standard index.html configuration found on the appframework itself for importing the headers.