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

Mobile & TypeScript

3 Answers 18 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Saop
Top achievements
Rank 1
Saop 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>
 
    <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

Sort by
0
Accepted
Petyo
Telerik team
answered on 13 Sep 2016, 07:40 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Saop
Top achievements
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
Saop
Top achievements
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.

Tags
General Discussions
Asked by
Saop
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Saop
Top achievements
Rank 1
Share this question
or