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

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

1 Answer 86 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Zachary
Top achievements
Rank 1
Zachary asked on 02 Oct 2015, 02:55 AM

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?

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 06 Oct 2015, 07:26 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Zachary
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or