This is a migrated thread and some comments may be shown as answers.

Mobile & TypeScript

3 Answers 104 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Seyfor asked on 12 Sep 2016, 02:44 PM

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 work

class 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 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>

<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

Accepted

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).