我正在开发一个基于 appframework 的移动应用程序，使用敲除 js 进行数据绑定。
我在浏览器控制台上不断收到以下错误消息：
未捕获的错误：无法解析绑定。
消息：ReferenceError：未定义技术名称；
绑定值：文本：技术名称，单击：$parent.loadSubSection
我可以验证数据是否已加载，但淘汰赛绑定似乎无法正常工作。有人可以帮我吗？我的代码如下：
索引.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 the 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 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);
}
</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">
/* 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("<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;
}
/* for the 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="">
<!-- this is the splashscreen you 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>
<!-- this is the splashscreen you 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 文件
/** 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);
}
此外，我正在使用以下 JSON 文件加载 json 数据并使用敲除映射插件自动映射它们。
"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"
},
],
我只是使用 appframework 本身上的标准 index.html 配置来导入标头。