CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Bogdan Zurac
Bogdan Zurac

Reputation: 6451

Ember Handlebars helper options.inverse undefined is not a function

So I have a template and I need to show/hide some text based on a return value from a method. I searched and noticed one should use handlebars helpers in order to achieve this. So I added a resetPassword helper inside the controller. The options.fn(this) part works. The options.inverse(this) doesn't. It throws the ubiquitous JS error Uncaught TypeError: undefined is not a function....

templates/reset-password.hbs:

<div class = "container">
  {{#resetPassword}}
      <h4>Password has been reset</h4>
      <h5>Your new password is: <b>{{password}}</b></h5>
  {{else}}
      <h4>Something went wrong! </h4>
      <h5>The password has not been reset! Please try again later.</h5>
  {{/resetPassword}}
</div>

controllers/reset-password.js:

export default Ember.Controller.extend({

  token:       null,

  init: function ()
  {
    this._super();
    Ember.Handlebars.registerHelper('resetPassword', function (options)
    {
      var token = this.get('token');
      var result = false;
     /* Ember.$.ajax({
        type:        "POST",
        url:         "/reset_password",
        contentType: "text/html",
        dataType:    "json",
        async:       false,

        beforeSend: function (request)
        {
          request.setRequestHeader("Authorization", token);
        },

        success: function (data, textStatus)
        {
          this.set('password', data.password);
          result = true;
        },

        error: function (data, textStatus)
        {
          result = false;
        }
      });*/
      if (result)
      {
        return options.fn(this);
      }
      return options.inverse(this);
    });
  }
});

Upvotes: 0

Views: 1150

Answers (1)

Bogdan Zurac
Bogdan Zurac

Reputation: 6451

So because JS and Ember purely suck, here's a workaround:

  {{#if resetPassword}}
      <h4>Password has been reset</h4>
      <h5>Your new password is: <b>{{password}}</b></h5>
  {{else}}
      <h4>Something went wrong! </h4>
      <h5>The password has not been reset! Please try again later.</h5>
  {{/if}}

And the controller action:

 resetPassword: function ()
                   {
                     var self = this;
                     var token = this.get('token');
                     var result = false;
                     Ember.$.ajax({
                       type:        "POST",
                       url:         "/api/users/reset_password",
                       contentType: "text/html",
                       dataType:    "json",
                       async:       false,

                       beforeSend: function (request)
                       {
                         request.setRequestHeader("Authorization", token);
                       },

                       success: function (data, textStatus)
                       {
                         var responseUser = data["users"][0];
                         self.set('password', responseUser.password);
                         result = true;
                       },

                       error: function (data, textStatus)
                       {
                         result = false;
                       }
                     });
                     return result;
                   }.property()

Upvotes: 1

Related Questions