0
데이터 바인딩을 위해 녹아웃 js를 사용하여 앱 프레임 워크 기반 모바일 애플리케이션을 개발 중입니다.앱 프레임 워크와 작동하도록 녹아웃 바인딩 얻기
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: technology_name is not defined;
Bindings value: text: technology_name, click: $parent.loadSubSection
내가 데이터가로드되는 것을 확인할 수 있지만, 녹아웃 제대로 작동하지 않는 것 같습니다 바인딩 :
내 브라우저 콘솔에 다음과 같은 오류 메시지가 표시됩니다. 누구든지 나를 도울 수 있을까? 다음과 같은 내 코드는 다음과 같습니다
에 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 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 자바 스크립트 내가 JSON 데이터를로드하기 위해 다음과 같은 JSON 파일을 사용하고 또한
/** 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);
}
파일 및 녹아웃 매핑 플러그인을 사용하여 자동으로 매핑하십시오.
"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 구성을 사용하고 있습니다.
technology_name은 어디에서 가져 왔습니까? 나는 당신의 뷰 모델에서 관측 값을 전혀 보지 못했다. –
json 데이터 파일에서 녹아웃 맵핑 플러그인을 사용하여 맵핑했습니다. 내가 사용하고있는 샘플 json 데이터 파일을 추가했다. – msrameshp
나는 이것이 무례하게 들릴 소지가 없다는 것을 의미하지 않는다. 그러나 나의 이해를 위해 전에 녹아웃을 사용 했는가? 마크 업을 놓치고있는 것 같습니다. –