我已将一些变量绑定到$(document).ready
var appdetail = kendo.observable({
addAppName: "TESTAPP",
addAppId: "13579"
});
kendo.bind($("#formAdd"), appdetail);
表单位于模态视图中。当我打开模态视图时,我可以看到“TESTAPP”和“13579”作为默认值。问题是,当我单击按钮时,我使用数据单击调用函数AddRecord ..在此函数中,我无法以类似
的方式获取表单的值var application_name = appdetail.get("addAppName");
有没有办法让这些值在其他函数中可用?
我正在添加HTML& JS代码..单击ADD按钮时,默认值(TESTDB& 13579)不会进入我的模态视图窗口。所有字段均为空白。当我单击对话框上的“授权”按钮时,默认值TESTDB将作为警报消息返回,无论对话框输入字段是什么。
当前代码是
Javascript:
var app = new kendo.mobile.Application(document.body, {layout: "mobile-tabstrip", loading: "<h1>Please wait...</h1>"});
var appdetail = kendo.observable({
addAppName: "TESTAPP",
addAppId: "13579"
});
kendo.bind($("#formAdd"), appdetail);
//alert(appdetail.get("addAppName"));
function closeModalViewAdd() {
$("#modalview-app-add").kendoMobileModalView("close");
};
function showWindow() {
$("#modalview-app-add").data("kendoMobileModalView").open();
}
function addToJson() {
alert(appdetail.get("addAppName"));
// console.log(appdetail.addAppId);
}
HTML:
<!doctype html>
<html>
<head>
<title>Kendo UI Mobile</title>
<meta charset="utf-8" />
<link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.mobile.min.js"></script>
<!-- Encigo Specific Page Scripts--->
<script src="../js/mytest.js"></script>
</head>
<body>
<!-- LAYOUT: default --------------------------------- start --------------->
<div data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<footer data-role="footer" data-position="fixed">
<div data-role="tabstrip">
<a data-icon="globe" href="#languages">Languages</a>
<a data-icon="settings" href="#applications">Applications</a>
<a data-icon="contacts" href="#login">Login</a>
</div>
</footer>
</div>
<!-- LAYOUT: default --------------------------------- finish --------------->
<!-- VIEW: modelview add --------------------------------- start --------------->
<div data-role="modalview" id="modalview-app-add" style="width: 95%;" data-show="bindNewDataVar">
<form id="formAdd">
<ul data-role="listview" data-style="inset">
<li>
<label>App Name
<input type="text" value="" id="app_name" data-bind="value: addAppName"/>
</label>
</li>
<li>
<label>App Id
<input type="number" value="" id="extapp_id" data-bind="value: addAppId"/>
</label>
</li>
</ul>
<p align="center"><a data-role="button" style="width: 35%" data-icon="play" align="center" id="buttonauthorize" data-click="addToJson" >Authorize</a><a data-role="button" style="width: 35%" data-icon="rewind" align="center" data-click="closeModalViewAdd" id="canceldialogbutton" >Cancel</a>
<!-- <br><a data-role="button" data-icon="pause" style="width: 35%" align="left" id="resetauthorization">Reset</a> -->
</p>
</form>
</div>
<!-- VIEW: modelview add --------------------------------- finish --------------->
<!-- VIEW: applications --------------------------------- start --------------->
<div id="applications" data-role="view" data-title="Defined Applications" data-layout="default">
<p align="center"><a style="width: 90%" data-role="button" data-rel="modalview" onclick="showWindow()" id="AddApplication" data-icon="add">Add</a></p>
</div>
</div>
<!-- VIEW: applications --------------------------------- finish --------------->
</body>
</html>
答案 0 :(得分:1)
我建议使用视图和模态视图的data-model属性。
<div data-role="modalview" id="modalview-app-add"
style="width: 95%;" data-show="bindNewDataVar" data-model="appdetail">
和
<div id="applications" data-role="view"
data-title="Defined Applications" data-layout="default" data-model="appdetail">
请参阅...... http://jsbin.com/fezel/1/edit
上的工作示例