Kendo ui 剑道UI可观察值在其他函数中不可用

Kendo ui 剑道UI可观察值在其他函数中不可用,kendo-ui,bind,observable,Kendo Ui,Bind,Observable,我已将一些变量绑定到$(文档)上的输入字段。就绪 var appdetail = kendo.observable({ addAppName: "TESTAPP", addAppId: "13579" }); kendo.bind($("#formAdd"), appdetail); 表单位于modalview中。当我打开模态视图时,我可以看到“TESTAPP”和“13579”作为默认值。问题是,当我单击按钮时,我正在使用data click调用函数AddRecord。。在

我已将一些变量绑定到
$(文档)上的输入字段。就绪

var appdetail = kendo.observable({
    addAppName: "TESTAPP",
    addAppId: "13579"

});

kendo.bind($("#formAdd"), appdetail);
表单位于modalview中。当我打开模态视图时,我可以看到“TESTAPP”和“13579”作为默认值。问题是,当我单击按钮时,我正在使用data click调用函数AddRecord。。在这个函数中,我不能像这样得到形式的值

var application_name = appdetail.get("addAppName");
有没有办法使这些值在其他函数中可用


我正在添加HTML和JS代码。。单击ADD按钮时,默认值(TESTDB&13579)不会提交到我的modalview窗口。所有字段均为空。当我单击对话框上的Authorize按钮时,无论对话框输入字段是什么,默认值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);
}
<!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>
var-app=new-kendo.mobile.Application(document.body,{layout:“mobile-tabstrip”,加载:“请稍候…”);
var appdetail=kendo.observable({
addAppName:“TESTAPP”,
addAppId:“13579”
});
剑道绑定($(“#formAdd”),appdetail);
//警报(appdetail.get(“addAppName”);
函数closeModalViewAdd(){
$(“#modalview应用程序添加”).kendoMobileModalView(“关闭”);
};
函数showWindow(){
$(“#modalview应用程序添加”).data(“kendoMobileModalView”).open();
}
函数addToJson(){
警报(appdetail.get(“addAppName”);
//console.log(appdetail.addAppId);
}
HTML:

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);
}
<!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>

剑道UI手机
  • 应用程序名称
  • 应用程序Id

取消

添加


我建议使用视图和模式视图的数据模型属性

<div data-role="modalview" id="modalview-app-add" 
style="width: 95%;" data-show="bindNewDataVar" data-model="appdetail">



见工作样品在

那应该行得通。见样本。。。你的可观察性是否被包装在一个闭包中,你的数据点击函数是否在闭包之外?亲爱的@Robin Giltner,我正在尝试做同样的事情,但仍然有一个问题。案例1:当我像您一样将绑定部分放在js文件的顶部时,对话框中的默认值不会出现,就好像表单与绑定无关一样。在这种情况下,当我单击按钮时,它不会返回已更改的值,而是已取消的值。案例2:当我将绑定部分放入showdialog函数中时,默认值是comming。但是,当我单击“更新”时,它会在控制台中返回一个错误,并显示uncaughtreferenceerror:appdetail未定义。无论如何,您可以发布您尝试使用的确切代码吗?要么在这里,要么在jsbin/jsfiddle/etc.?@Robin Giltner我在这里添加了js和html代码。