我无法获得基本的数据绑定工作。 似乎我必须使用.fetch进行数据绑定才能工作。我觉得这种方式不正确，加上保存方法也没有被调用。使用此方法时，TabStrip也停止工作。
是否始终需要在每个页面的末尾使用kendo应用程序构造函数？在另一个页面，如果我使用它页面不显示???
我对剑道很新。
Json返回
[{"JobID":8,"JobDescription":"Lets try these for apples","JobTemplateID":1,"JobTemplateName":"Standard Service","JobSignature":null,"JobNotes":null,"AssetName":null,"SiteName":"??? ","LocationName":"??? ","Priority":"???","JobLoggedOn":"2015-01-09T15:28:14","JobEstimatedStart":"2015-01-09T15:28:04.76","JobCompletedOn":null,"AssignedToName":"???"}]
，代码是
<!DOCTYPE html>
<html>
<head>
<title>Job Details</title>
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.common.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.default.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.dataviz.mobile.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.mobile.all.min.css" />
<script src="Scripts/Kendo/jquery.min.js"></script>
<script src="Scripts/Kendo/kendo.core.min.js"></script>
<script src="Scripts/Kendo/kendo.ui.core.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.button.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.listview.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.tabstrip.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.modalview.min.js"></script>
<script src="Scripts/Signature/jSignature.min.js"></script>
</head>
<body>
<div data-role="view" id="tabstrip-details" data-title="Details" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>General Details
<ul>
<li>Site <span class="value" data-bind="text: jobDetails.SiteName"></span></li>
<li>Location <span class="value" data-bind="text: jobDetails.LocationName"></span></li>
<li>Asset <span class="value" data-bind="text: jobDetails.AssetName"></span></li>
<li>Priority <span class="value" data-bind="text: jobDetails.Priority"></span></li>
<li>Template <span class="value" data-bind="text: jobDetails.JobTemplateName"></span></li>
</ul>
</li>
<li>Dates and Assignee
<ul>
<li>Assigned To <span class="value" data-bind="text: jobDetails.AssignedToName"></span></li>
<li>Estimated Start <span class="value" data-bind="text: jobDetails.JobEstimatedStart"></span></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-notes" data-title="Notes" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-steps" data-title="Steps" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Before Starting
<ul>
<li>
<label>
<input type="checkbox" />Step 1</label></li>
<li>
<label>
<input type="checkbox" />Step 2</label></li>
<li>
<label>
<input type="checkbox" />Step 3</label></li>
</ul>
</li>
<li>Step by Step
<ul>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-parts" data-title="Parts" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-photos" data-title="Photos" data-layout="mobile-tabstrip">
<input type="file" accept="image/*" capture>
<canvas></canvas>
</div>
<div data-role="view" id="tabstrip-done" data-title="Finish Job" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Completed On
<ul>
<li>
<label>
Date
<input type="date" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
<li>
<label>
Time
<input type="time" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
</ul>
</li>
<li>Sign Off
<ul>
<li>Signature <span class="value"><a data-role="button" data-rel="modalview" href="#modalview-sign">Sign Here</a></span></li>
</ul>
</li>
<li>Submit
<button data-bind="click: save">Job Done</button>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" href="Home.html#JobList.html">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-details" data-icon="about">Details</a>
<a href="#tabstrip-notes" data-icon="organize">Notes</a>
<a href="#tabstrip-steps" data-icon="share">Steps</a>
<a href="#tabstrip-parts" data-icon="cart">Parts</a>
<a href="#tabstrip-photos" data-icon="camera">Photos</a>
<a href="#tabstrip-done" data-icon="compose">Finish Job</a>
</div>
</div>
</div>
<div data-role="modalview" id="modalview-sign" style="width: 90%; height: 70%">
<div data-role="header">
<div data-role="navbar">
<a data-align="right" data-click="closeModalView" data-role="button">Close</a>
</div>
</div>
<div id="signature"></div>
</div>
<style scoped>
.value {
float: right;
margin-top: 8px;
color: #bbb;
}
</style>
<script>
$("#signature").jSignature();
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/job/getjob/8",
dataType: "json"
},
update: {
type: "POST",
url: "/api/job/SaveJob",
},
}
});
dataSource.fetch(function () {
var data = dataSource.data();
var job = data[0];
var viewModel = kendo.observable({
jobDetails: job,
save: function () {
this.dataSource.sync();
}
});
kendo.bind(document.body, viewModel);
});
var app = new kendo.mobile.Application(document.body);
</script>
<script>
function closeModalView() {
$("#modalview-sign").kendoMobileModalView("close");
}
</script>
</body>
</html>
非常感谢。