从 Kendo UI viewModel 导航到另一个页面答案

【问题标题】：Navigate to another page from a Kendo UI viewModel从 Kendo UI viewModel 导航到另一个页面
【发布时间】：2016-10-14 13:21:45
【问题描述】：

我请求接收身份验证令牌。如果没问题，我会导航到 index.html 页面（参见下面的“NAVIGATE TO”index.html”）。

我该怎么做？

我尝试过：var app = new kendo.mobile.Application() app.navigate("index.html");，但它不起作用。我收到以下错误：

0x800a139e - JavaScript 错误：您的 kendo 移动应用程序元素不包含任何设置了 data-role="view" 属性的直接子元素。确保使用正确的容器实例化移动应用程序。

谢谢

class LoginViewModel extends kendo.data.ObservableObject {
isVisible = true;
username: string = "";
password: string = ""; 
errorText: string = "";     

clickHandler: any = function (e) {
    var self = this;
    var data = { grant_type: "password", username: self.get("username"), password: self.get("password") };
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        url: "/token",
        data: data
    }).done(function (data, textStatus, jqXHR: JQueryXHR) {            
        // Cache the access token in session storage.
        sessionStorage.setItem("accessToken", data.access_token);   

        ***NAVIGATE TO "index.html"***

    }).fail(function (jqXHR: JQueryXHR, textStatus, errorThrown) {
            self.set("errorText", jqXHR.status + ': ' + jqXHR.statusText)
        });
}

constructor() {
    super();
    super.init(this);

}
}

【问题讨论】：

标签： ajax mvvm kendo-ui

【解决方案1】：

您的导航正常；您收到错误是因为应用程序容器不包含 <div> 元素，而 data-role="view" 是直接子元素。

你需要有类似的东西：

<body>        
    <div data-role="view" ....></div>
</body>

然后初始化你的应用

... = new kendo.mobile.Application(document.body 
//or another jquery selector 
);

【讨论】：