我使用来自telerik platorm icenium.com的icenium天气示例为我正在做的测试应用加载数据文件json 我的json如下
[
{
"screen_id": "course_outline",
"screen_title": "NICMA Child Minding App - Course Outline",
"screen_display_type": "/json_schema/P14_navigation.schema.json",
"updated": "1371030938",
"author": [
{
"author_name": "Andrew Moran",
"author_url": "http://people.learningpool.com/user/id"
}
],
"comments": "authoring tool metadata, not used in app",
"authoring_tool": {
"version": "x.x",
"href": ""
},
"copyright": "2013 - Learning Pool",
"screen_content": {
"screen_title": "Child Minding Navigation",
"start_text": "Text at the start of the screen",
"navigation_items": [
{
"screen_id": "food_hygiene_legislation_doc",
"screen_display_type": "/json_schema/P03_content_screen.schema.json",
"display_text": "Home"
}
],
"end_text": ""
}
]
我刚刚复制了天气功能，并将其命名为course-outline.js 并将其添加到我的脚本
(function (global) {
var WeatherViewModel,
app = global.app = global.app || {};
WeatherViewModel = kendo.data.ObservableObject.extend({
weatherDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data/course_outline.json",
dataType: "json"
}
}
});
that.set("weatherDataSource", dataSource);
}
});
app.weatherService = {
viewModel: new WeatherViewModel()
};
})(window);
但由于某种原因，当我点击天气按钮时，即使我告诉模板找到screen_title任何想法，它仍会挂起
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/course-outline.js"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<!--Home-->
<div id="tabstrip-home"
data-role="view"
data-title="Home">
<div class="view-content">
<h1>Welcome!</h1>
<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
<div class="img"></div>
</div>
</div>
<!--Login-->
<div id="tabstrip-login"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div class="view-content">
<div class="logo"></div>
<h3 data-bind="invisible: isLoggedIn">Enter your credentials:</h3>
<h1 class="welcome" data-bind="visible: isLoggedIn">Welcome, <span data-bind="text: username"></span>!
</h1>
<div class="buttonArea">
<input type="submit" id="logout" data-role="button" data-bind="click: onLogout, visible: isLoggedIn" class="login-button" value="Logout" />
</div>
<form data-bind="events: { keyup: checkEnter }">
<ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
<li>
<label>
Username
<input type="text" data-bind="value: username" />
</label>
</li>
<li>
<label>
Password
<input type="password" data-bind="value: password" />
</label>
</li>
</ul>
<div class="buttonArea">
<input type="submit" id="login" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" class="login-button" value="Login" />
</div>
</form>
</div>
</div>
<!--Location-->
<div id="tabstrip-location"
data-role="view"
data-title="Location"
data-init="app.locationService.initLocation"
data-show="app.locationService.show"
data-hide="app.locationService.hide"
data-model="app.locationService.viewModel"
data-stretch="true">
<div id="no-map" data-bind="invisible: isGoogleMapsInitialized">
Location requires internet connection to display the map.
</div>
<div id="map-search-wrap" data-bind="visible: isGoogleMapsInitialized">
<button id="map-navigate-home" data-bind="click: onNavigateHome"></button>
<form onsubmit="return false;">
<input id="map-address" type="search" data-bind="value: address" placeholder="Address" />
<input id="map-search" type="submit" value="" data-bind="click: onSearchAddress" />
</form>
</div>
<div id="map-canvas" data-bind="visible: isGoogleMapsInitialized"></div>
</div>
<!--Weather-->
<div id="tabstrip-weather"
data-role="view"
data-title="Weather"
data-model="app.weatherService.viewModel">
<div class="weather">
<p class="weather-title">Course Title</p>
<div class="separator">
<div class="dark"></div>
<div class="light"></div>
</div>
<ul class="forecast-list"
data-role="listview"
data-bind="source: weatherDataSource"
data-template="weather-forecast-template">
</ul>
</div>
</div>
<!--Weather forecast template-->
<script type="text/x-kendo-tmpl" id="weather-forecast-template">
<div>
<div class="position-left">
<span class="weather-info date">${screen_title}</span>
</div>
<div class="position-right">
<span class="weather-info temperature high">${screen_title}<sup>°</sup></span>
<span class="weather-info temperature low">${screen_title}<sup>°</sup></span>
</div>
</div>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout">
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-login" data-icon="contacts">Login</a>
<a href="#tabstrip-location" data-icon="search">Location</a>
<a href="#tabstrip-weather" data-icon="globe">Weather</a>
</div>
</div>
</div>
</body>
</html>