Mobile & TypeScript

4 posts, 1 answers
  1. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 12 Sep Link to this post

    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>

  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 13 Sep in reply to Petyo Link to this post

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

  5. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 15 Sep in reply to Matjaž Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready