keep getting undefined error when using data-show attribute

5 posts, 0 answers
  1. Jaja
    Jaja avatar
    8 posts
    Member since:
    May 2013

    Posted 11 Jun 2014 Link to this post

    Hi guys, I have one global object named App that gets instantiated right away.  In my view I'm trying to use data-show="App.PrimaryController.OnViewShow" but I keep getting the following error:

    Cannot read property 'PrimaryController' of undefined

    If I take out the data-show attribute everything works fine.  I've included code for all the involved parties.  Any ideas on what could be going wrong?  Btw, this is a typescript app, thanks!

    ===================================================
    PRIMARY.HTML
    ------------------
    <div data-role="view"
         data-layout="app-layout"
         data-show="App.PrimaryController.OnViewShow"
         id="primaryview">
        Hello from the primary view!!
    </div>

    ===================================================
    MAIN.TS  //as in main() -- this file is what is used as the data-main attribute in my requirejs script tag
    ------------------
    /// <reference path="../typings/require.d.ts" />

    import MyApplication = require('../app/MyApplication');

    var App: MyApplication = new MyApplication();

    ===================================================
    MYAPPLICATION.TS 
    ------------------
    /// <reference path="../typings/require.d.ts" />

    import PrimaryController = require("../app/controllers/PrimaryController");

    class MyApplication
    {
        KendoApp: kendo.mobile.Application;
        PrimaryController: PrimaryController;

        constructor()
        {
            this.InitializeControllers();
            this.InitializeKendoApp();
        }

        private InitializeControllers()
        {
            this.PrimaryController = new PrimaryController(this);
        }

        private InitializeKendoApp()
        {
            var appOptions: kendo.mobile.ApplicationOptions = {};
            appOptions.initial = this.PrimaryController.View;
            appOptions.layout = "app-layout";
            appOptions.transition = "slide";

            this.KendoApp = new kendo.mobile.Application($(document.body), appOptions);
        }
    }

    export = MyApplication;

    ===================================================
    PRIMARYCONTROLLER.TS
    ------------------
    /// <reference path="../../typings/require.d.ts" />

    import MyApplication = require('../../app/MyApplication');
    import IController = require("../../app/controllers/IController");

    class PrimaryController extends kendo.data.ObservableObject implements IController
    {
        UserItems: kendo.data.ObservableArray = new kendo.data.ObservableArray([]);
        View: string;

        constructor(public App: MyApplication)
        {
            super();
            super.init(this);
            this.View = "views/primary.html";
        }

        OnViewShow() : void
        {

        }
    }

    export = PrimaryController;




  2. Jaja
    Jaja avatar
    8 posts
    Member since:
    May 2013

    Posted 11 Jun 2014 in reply to Jaja Link to this post

    I should also point out that when the error occurs "App" does not get instantiated i.e. the undefined error...if that helps any
  3. Jaja
    Jaja avatar
    8 posts
    Member since:
    May 2013

    Posted 12 Jun 2014 Link to this post

    so just dawned on me that I was forgetting my call to onDeviceReady; also added a call to the define function for requirejs.  Error no longer occurs but now I get a blank screen :-(
    =======================================
    /// <reference path="../typings/require.d.ts" />

    import AddItApplication = require('../app/AddItApplication');
    var App: AddItApplication;

    define(["app"], function (app)
    {    
        document.addEventListener("deviceready", function ()
        {
            App = new AddItApplication();
        }, false);
    });
  4. Jaja
    Jaja avatar
    8 posts
    Member since:
    May 2013

    Posted 13 Jun 2014 Link to this post

    thought I would update this post in case anyone else runs into this scenario, in typescript whenever you use an import statement that code file gets wrapped into a define function by the typescript compiler so while my App variable "appeared" to be global during design time its not after compilation.  In order to make it global just simply had to attach an App property to the window object but its necessary to cast the window object to <any> first because without the cast typescript won't compile.  Final code is below.

    /// <reference path="../typings/require.d.ts" />

    import AddItApplication = require('../app/AddItApplication');

    document.addEventListener("deviceready", function ()
    {    
        //window.App = new AddItApplication();   <<< won't compile, needs cast as shown below
        (<any>window).App = new AddItApplication();
    }, false);
  5. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 16 Jun 2014 Link to this post

    Hello Jaja,

    Thanks for your feedback.
    Should I assume that you have solved your issue or you still need assistance?

    Regards,
    Zdravko
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
Back to Top