Can you write some example how to use your Mobile framework with TypeScript. I write some layout, some views, bind it to model, but as soon as I add import statement, binding to model is not working.
App.ts
import * as WS from "./libraries/matjaz/classes/websocket"; //cause binding doesn't workclass ModelLogin extends kendo.data.ObservableObject{ host = ""; port = 1501; username = ""; password = ""; constructor() { super(); super.init(this); } onLogMeInClick() { }}class ModelMain extends kendo.data.ObservableObject{ isLogedIn = true; constructor() { super(); super.init(this); $("#button-logout").click(() => { this.set("isLogedIn", false); app.navigate("#/"); }); } onShowLoginClick() { $("#view-login").data("kendoMobileModalView").open(); }}var modelLogin = new ModelLogin();var modelMain = new ModelMain();var app: kendo.mobile.Application;$(function (){ app = new kendo.mobile.Application($(document.body), { skin: 'flat', layout: "layout-main", init: function () { if (modelMain.isLogedIn !== true) $("#view-login").data("kendoMobileModalView").open(); } }); });index.html:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="styles/external/kendo/kendo.mobile.flat.css" rel="stylesheet" /> <link href="styles/external/font-awesome/font-awesome.css" rel="stylesheet" /> <script src="scripts/external/jquery-2.1.4.js"></script> <script src="scripts/external/kendo.mobile.js"></script> <script> kendo.data.binders.widget.buttonText = kendo.data.Binder.extend({ init: function (widget, bindings, options) { //call the base constructor kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options); }, refresh: function () { var that = this, value = that.bindings["buttonText"].get(); //get the value from the View-Model $(that.element).text(value); } }); </script> <script src="scripts/external/require.js" data-main="scripts/app"></script></head><body> <div id="view-main" data-role="view" data-layout="layout-main" data-model="modelMain" data-title="Title"> <div data-bind="visible: isLogedIn"> <ul class="navigation-icons"> <li><a href="#holiday_announcment.html"><span class="fa fa-4x fa-plane"></span><div>Najava dopusta</div></a></li> </ul> </div> <div data-bind="invisible: isLogedIn"> <button data-role="button" class="km-primary km-justified" data-bind="events: {click: onShowLoginClick}">click</button> </div> </div> <div data-role="modalview" id="view-login" data-model="modelLogin" style="width:90%;"> <div> <ul data-role="listview" data-style="inset"> <li> <label class="km-required"> <span>host</span> <input data-bind="value: host" type="text" /> </label> </li> <li> <label class="km-required"> <span>port</span> <input data-bind="value: port" type="number" /> </label> </li> <li> <label class="km-required"> <span>username</span> <input data-bind="value: username" type="text" /> </label> </li> <li> <label class="km-required"> <span>password</span> <input data-bind="value: password" type="password" /> </label> </li> <li style="text-align: center;"><button data-role="button" class="km-primary" data-bind="events: {click: onLogMeInClick}">login</button></li> </ul> </div> </div> <section data-role="layout" data-id="layout-main" data-model="modelMain"> <header data-role="header"> <div data-role="navbar" class="navigation"> <a data-align="left" href="#/"><span class="fa fa-home"></span></a> <a data-align="left" style="padding-left: 2em;"><span class="fa fa-angle-left"></span></a> <span data-role="view-title"></span> <a data-align="right" data-bind="events: {click: onLogoutClick}" id="button-logout"><span class="fa fa-sign-out"></span></a> </div> </header> </section></body></html>3 Answers, 1 is accepted
0
Accepted
Hi,
you can check the transpiled code, but I think that the model instances are not globally visible, hence the model binding does not work for them.
Regards,
Petyo
Telerik by Progress
you can check the transpiled code, but I think that the model instances are not globally visible, hence the model binding does not work for them.
Regards,
Petyo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Seyfor
Top achievements
Rank 1
Rank 1
answered on 13 Sep 2016, 09:39 AM
They are (since they are logged in console before calling kendo.mobile.Application):
$(function (){ console.log("Starting application", modelLogin, modelMain); app = new kendo.mobile.Application($(document.body), { skin: 'flat', layout: "layout-main", init: function () { if (modelMain.isLogedIn !== true) $("#view-login").data("kendoMobileModalView").open(); } });});I think this is expected since importing module does not change app.js. file (where kendo.mobile.Application is called).
0
Seyfor
Top achievements
Rank 1
Rank 1
answered on 15 Sep 2016, 05:43 AM
Missing piece in my code was:
interface Window { modelMain: ModelMain; }window.modelMain = modelMain;Variable modelMain was created in global namespace, so window was able to see it. But when first module was imported, require.js encapsulated code.