locked
How to get access to a WinJS.UI.Pages "this" inside WinJS.UI.eventHandler

    Question

  • I have this code:

    WinJS.UI.Pages.define("pages/obligationPage.html", {
        ready: function(element, _arg) {
          this.obligation = _arg.obligation;
          return WinJS.Binding.processAll(element, this).then((function(_this) {
            return function() {
              return _this.textElement = element.querySelector("#text");
            };
          })(this));
        },
        reset: WinJS.UI.eventHandler(function(event) {
          return requireAsync("catalogs").then(function(_arg) {
            var catalogs;
            catalogs = _arg[0];
            return catalogs.oneAsync("ObligationType");
          }).then(function(obligations) {
            return this.textElement.value = obligations.text(this.obligation.code);
          });
        })

    It seems I do not have access to the proper "this" inside the eventHandler. Is the only way to solve that using .bind(this, ...)?

    edit: It seems that has something to do with the declarative data binding I am using. I assign the onclick handler via "data-win-bind='onclick:reset'" which gives me the element as "this" inside the handler. Any way to prevent that?


    • Edited by pkursawe Wednesday, May 28, 2014 5:53 PM
    Wednesday, May 28, 2014 5:12 PM

Answers

  • Hi!

    A common pattern to solve this kind of problems is the following:

        ready: function(element, _arg) {
    var thePage =this;
    //use thePage whenever you want to reference the "this" that was the page inside the handler
          this.obligation = _arg.obligation;
          return WinJS.Binding.processAll(element, this).then((function(_this) {
            return function() {
    //for example
              return thePage.textElement = element.querySelector("#text");
            };
          })(this));
        

    Hope it helps!

    Saturday, May 31, 2014 1:17 AM

All replies

  • Can you also provide your HTML content here? What is reset associated with? Maybe a complete example should help isolate the problem...One suggestion is to try declaring "var that = this" as soon as you enter the eventHandler and then use "that" instead of "this" later on...


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, May 30, 2014 1:13 AM
    Moderator
  • Thanks for your answer, Prashant!

    The HTML content looks like this:

    <button data-win-bind="onclick:reset">Reset</button>

    This wires up the correct event handler, but the "this" inside is the button element instead of the WinJS Page object. Of course I could traverse the DOM from the event.srcElement back to the page and use the pages.winControl as my point of reference.

    Friday, May 30, 2014 8:48 PM
  • Hi Phil,

    Can you post your complete/ simple HTML & JS using a simple Navigation App example to isolate the issue?

    Thanks,

    Prashant


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, May 30, 2014 11:53 PM
    Moderator
  • Hi!

    A common pattern to solve this kind of problems is the following:

        ready: function(element, _arg) {
    var thePage =this;
    //use thePage whenever you want to reference the "this" that was the page inside the handler
          this.obligation = _arg.obligation;
          return WinJS.Binding.processAll(element, this).then((function(_this) {
            return function() {
    //for example
              return thePage.textElement = element.querySelector("#text");
            };
          })(this));
        

    Hope it helps!

    Saturday, May 31, 2014 1:17 AM