TypeScript/MVVM "this" context lost in event handling on child object

2 posts, 0 answers
  1. Zachary
    Zachary avatar
    3 posts
    Member since:
    Apr 2014

    Posted 01 Oct 2015 Link to this post

    I need a solution for this scenario. In some kendo widgets "this" does not get hijacked (listview for example), but in most others it does.

    I have an object:

    export class Manager {

         public controlId: string;

         public masterpanel: MasterPanel;

         public detailspanel: DetailsPanel;

         constructor(options: IManagerOptions) {

              this.controlId = options.controlId;

              this.masterpanel = new MasterPanel(guid(), options);

              this.detailspanel = new DetailsPanel(guid(), options);

              kendo.bind($("#" +  this.controlId), this, "");



    This is MasterPanel:

    export class MasterPanel extends kendo.data.ObservableObject {

         constructor(controlId: string, options: IManagerOptions) {

              this.dataSource = new kendo.data.DataSource({

                   data: [] //Assume data here



         public currentParent: IManagerFolder;

         public dataSource: kendo.data.DataSource;

         public masterData: kendo.data.ObservableArray = new kendo.data.ObservableArray([]);

         public onMasterItemClick(e) {

              var selectedItem = e.sender.select();

              var selectedDataItem = e.sender.dataItem(selectedItem);

              this.set("currentParent", selectedDataItem);


         public backToRoot(e) {

              var rootItem = this.masterData[0];

              this.set("currentParent", rootItem);




    These are my templates:

    <script id="managerTemplate" type="text/html">

         <div data-role="navbar"      

                 data-bind="visible: masterpanel.navBackVisible, events: { click: masterpanel.backToRoot }">

              <div class="manager-navroot-text" data-bind="text: masterpanel.masterData[0].text"></div>


         <div data-template="masterListTemplate"

                 data-bind="source: masterpanel">



    <script id="masterListTemplate" type="text/html">

         <div data-role="listview"  



                 data-bind="source: currentParent.childFolders, events: { change: onMasterItemClick }">



    <script id="masterItemTemplate" type="text/html">

         <div>#: text #</div>


    So why, when I click the listview, is "this" my masterpanel as expected, but when I click on the navbar, it's the manager?

  2. Rosen
    Rosen avatar
    3215 posts

    Posted 06 Oct 2015 Link to this post

    Hello Zachary,


    This is due to context in which the handler is resolved. The navbar click handler is executed in the context of the manager instance, as this is where it is specified - the navbar is bound to the manager. Where the list view is created/bound in the context of the masterpanel. 

    Thus, having the above in mind, you should move the navbar into the "masterpanel" template. Or change the code in the handler to access the masterpanel instance via the manager.



    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top