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

[Zachary]

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>

     <div data-template="masterListTemplate"

             data-bind="source: masterpanel">

     </div>

</script>

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

     <div data-role="listview"  

             data-template="masterItemTemplate"  

             data-selectable="single"  

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

     </div>

</script>

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

     <div>#: text #</div>

</script>

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

[Rosen]

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.

 

 

Regards,
Rosen
Telerik