At this time it looks like disabled won't allow a custom inline if that you pass in. Would this be something the team at dockyard would accept as a PR? If yes/no do you have another PR or issue someone has submitted in the past for reference? If this is new functionality completely -any suggestions for binding model properties for the disabled property **w/out having to add model as an attributeBinding and doing a custom binding like shown below?

    initialize: Ember.on("init", function() {
        Ember.Binding.from("model.isDirty").to("thingWasDirty").connect(this);
    })

Thank you for this awesome open source project. I have been using this addon in my apps and have had some great success. However, I have noticed that there are some recent commits on master but there has not been a new publish on npm in 5 months. Will there be a new version published soon?

ember install ember-async-button generates a deprecation warning in ember 2.18.0:

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }).

I believe updating ember-cli-babel to 6.11.0 will fix this as 6.8.2 depends on an older version of ember-cli-version-checker.

I've got a case where I'd like to set the same value for pending across all buttons. It'd be nice to have a config to globally set this.

I'd also like to include HTML as the default pending option. I wasn't able to extend this component in my own code. Any chance of showing how I can extend it for this functionality, or adding this?

I am trying to use this async-button component and I really like it.

I am running into an issue where my client side validation says that I do not need to fire an ajax request because I know that the form is not valid. I display my errors and forgo sending the request.

It looks something like this:

actions: {
    save: function(callback) {
        if(this.get("valid")) {
            this.sendAction("onSave", callback);
            // promise fired in "onSave" action
        }
    }
}

In this else condition, there is no promise to resolve so the async-button remains in a "pending" state.

Thanks!

Steps to reproduce:

• Go to http://jsbin.com/seruvepoyu/1/edit
• Click save
• Immediately after click test
• Wait for the assertion

I see this as a major downfall of passing around callbacks in actions, but I see this is something that is being encouraged now. Is this going to be the official pattern going forward, and if it is should we just swallow the calling set on destroyed object assertion.

I'm using ember-mocha. Where could I start tracking this down?

Hi,

first, thanks for the work on this.

At least to me, the implementation of reset is unclear. See the following real life example:

 {{model.isDirty}} <!-- for debugging only -->
 {{async-button class="btn btn-success" action="saveBillingDetails" default="Save billing details" pending="Saving ..." fulfilled="Billing details saved" reset=model.isDirty}}

The states default and pending are working as expected. Only I cannot see the state fulfilled as it switches immediately back to default.
My thoughts:

• I can verify that model.isDirty is false - via {{model.isDirty}} and it is getting dirty when I change inputs in the underlying form - fine.
• When I remove the reset property, it remains in state fulfilled - fine.
• I guess, directly binding model.isDirty to reset is somehow wrong.

Thank you for a hint.
Kind regards,
Manuel

Since this is deprecated, does that mean we shouldn't expect any updates / activity on issues / merged PRs?

I quickly try this addon in our app. It works quite well but I faced a problem.

The width of the button is changed because the size of the text changes. It would be great to have something out of the box in Ember-Async-Button.

Tests in question: "button bound to controller promise hidden on resolve" and "button bound to controller promise hidden on reject".

Each of them only tests for controller.set("promise", promise) which is happening in the test itself. Commenting out the resolve() and reject() lines does not affect test success.

I'm not sure what they were supposed to test (the template binds controller.promise to the component's boundPromise property, but that property is not used anywhere), so i'm unable to provide a PR.

Hi! Thank you for the awesome addon!

Before i started using it, i tried ember-idx-button. That addon appeared to be buggy, so i abandoned it in favor of ember-cli-async-button.

But ember-idx-button had a couple of awesome features that ember-cli-async-button is missing.
#1. Options to assign custom classes depending on the state

This feature is irreplaceable for people using non-semantic CSS frameworks like Bootstrap and Foundation.

Instead of writing custom CSS to style different button states, we could simply tell which classes to use in which state:

      {{ async-button
        action="saveSelection"
        class="btn btn-lg"

        default="Save"
        defaultClass='btn-primary'

        pending="Saving..."
        pendingClass='btn-default'

        rejected="Save failed :("
        rejectedClass='btn-danger'
      }}

#2. Built in icon functionality

We could provide options similar to suggested above. When these new options are set, the component would render an additional <i> element inside and apply mentioned classes to it.

      {{ async-button
        action="saveSelection"
        class="btn btn-lg"

        default="Save"
        defaultIcon='glyphicon glyphicon-refresh'

        pending="Saving..."
        pendingIcon='glyphicon glyphicon-refresh glyphicon-spinning'

        rejected="Save failed :("
        rejectedIcon='glyphicon glyphicon-warning-sign'
      }}

Example pending state:

<button ... >
  <i class="glyphicon glyphicon-refresh glyphicon-spinning"></i>
  Saving...
</button>

Thanks for the great plugin. It has been very useful. I have a use case where my async button runs a search. The search can be triggered when the user clicks on the async-button (the search button) or when the user presses enter on the input.

What's the best way to trigger the async button's action when the user presses enter on the input? Before I was using async-button both pressing enter on the input and clicking the search button called the same action.

Now that I'm using the async-button this won't work as pressing enter doesn't have a callback and doesn't put the button into a "pending" state.

Is the best practice here to manually set disableWhen to true when the user uses the enter key along with a separate action path that handles setting disableWhen back to false?

Thank you!

I cloned this project, ran npm install && bower install then ember server the response was:

version: 0.0.42
Livereload server on port 35729
Serving on http://0.0.0.0:4200
Attempting to watch missing directory: addon
Error: Attempting to watch missing directory: addon
    at EventEmitter.Watcher_addWatchDir [as addWatchDir] (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/broccoli-sane-watcher/index.js:66:11)
    at /Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:66:35
    at $$$internal$$tryCatch (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
    at /Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1066:13
    at $$rsvp$asap$$flush (/Users/bheaton/code/dockyard/ember-cli-async-button/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
    at process._tickCallback (node.js:415:13)

I was about to convert a table of mine to use async-button.

The problem is that each button is part of an {{#each}} loop and the task is passed as an action parameter.

With a regular button

{{#each task in tasks}}
      <button {{action "deleteTask" task}}>Delete</button>

With async-button there is no way to sypply the task to the action

{{#each task in tasks}}
      <button {{action "deleteTask" task}}>Delete</button>
      {{async-button type="submit" action="deleteTask" default="Delete" pending="Deleting..." fulfilled="Delete" rejected="Failed. Try again"}}

Is there a way to support what I am trying to do?

When I click a "save" async-button, I first check that the model is valid. If not, I show a message. All of this is sync, yet the async-button shows the "pending" state. How do I resolve this?

Instead of the blanket reset option, this would allow you to reset on validation errors, but not reset on a success.

Would you accept a PR of this?

Problem

(on master) The following doesn't change to "Saving" when clicked, it just disables the button until the promise resolves

{{#async-button action="saveCalculation"
                class='btn btn-primary btn-block btn-lg'
                pending="Saving"
}}
    Save <i class='glyphicon glyphicon-transfer'></i> <i class='glyphicon glyphicon-cloud'></i>
{{/async-button}}

I've put it into this jsbin that I copied from another ticket. I couldn't update it to master, but it demonstrates the problem: the button gets disabled but the text does not change.

http://jsbin.com/nigaxinusi/edit?html,js,output

The block form is nice because it allows entering HTML entities, but the readme doesn't say that it breaks the other text options. It says "The component can also take a block".

Has anyone worked with / around this?

Solution

1- Update the readme to say block form doesn't support text options for different load states
2- Let people work with the loading state in their block

I think the general solution would be to have a property we can query in the block to decide what to render, as pending might look quite different from default, e.g. having a loading spinner

{{#async-button action="saveCalculation"
                class='btn btn-primary btn-block btn-lg'
                pending="Saving"
}}
  {{#if pending}}
    Saving <i class='glyphicon glyphicon-whatever'></i>
  {{#else}}
    Save <i class='glyphicon glyphicon-transfer'></i> <i class='glyphicon glyphicon-cloud'></i>
  {{/if}}
{{/async-button}}

Passing "text" into the block as a parameter would help in some cases, as below, but is less general as we wouldn't be able to change the decorating HTML (so no loading spinner).

{{#async-button action="saveCalculation"
                class='btn btn-primary btn-block btn-lg'
                pending="Saving"
}}
  {{text}} <i class='glyphicon glyphicon-transfer'></i> <i class='glyphicon glyphicon-cloud'></i>
{{/async-button}}

Thanks for reading!

It looks like the build with support for closure actions never got a new version and corresponding npm publish.

Using this addon with Ember 11.1 I am receiving the following deprecation warnings.

DEPRECATION: You're attempting to render a view by passing pendingBinding to a view helper, but this syntax is deprecated. You should use `pending=someValue` instead.

@danmcclain is it still the case that the attribute binding syntax need to be changed for the component to automatically register it?

Adding a .catch handler to the callback promise, and not re-throwing the provided error leads to the error being swallowed (preventing the error action bubbling and states).

https://github.com/dockyard/ember-cli-async-button/blob/master/addon/components/async-button.js#L79-L81

We should be doing something like:

    .catch(function(error) {
      if (!_this.isDestroyed) {
        set(_this, 'textState', 'rejected');
      }

      throw error;
    });

I just tried to install it using npm install (i'm using ember-cli) but right after installing I get an error trying to run ember server

CLI: 0.0.36
Ember: 1.7

Steps

1. ember new my-app
2. cd my-app
3. npm install ember-cli-async-button --save-dev
4. ember server

Error

$ ember server
version: 0.0.36
object is not a functionTypeError: object is not a function
    at Project.<anonymous> (my-app\node_modules\ember-cli\lib\models\project.js:80:12)
    at Array.map (native)
    at Project.initializeAddons (my-app\node_modules\ember-cli\lib\models\project.js:71:40)
    at EmberApp._notifyAddonIncluded (my-app\node_modules\ember-cli\lib\broccoli\ember-app.js:109:16)
    at new EmberApp (my-app\node_modules\ember-cli\lib\broccoli\ember-app.js:105:8)
    at Object.<anonymous> (my-app\Brocfile.js:5:11)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.loadBrocfile (my-app\node_modules\ember-cli\node_modules\broccoli\lib\builder.js:147:14)
    at Class.module.exports.Task.extend.init (my-app\node_modules\ember-cli\lib\models\builder.js:14:26)
    at new Class (my-app\node_modules\ember-cli\lib\models\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (my-app\node_modules\ember-cli\lib\tasks\serve.js:15:19)
    at Class.module.exports.Command.extend.run (my-app\node_modules\ember-cli\lib\commands\serve.js:35:18)
    at Class.Command.validateAndRun (my-app\node_modules\ember-cli\lib\models\command.js:74:15)
    at CLI.<anonymous> (my-app\node_modules\ember-cli\lib\cli\cli.js:33:20)
    at $$$internal$$tryCatch (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:470:16)
    at $$$internal$$invokeCallback (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:482:17)
    at $$$internal$$publish (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:453:11)
    at $$rsvp$asap$$flush (my-app\node_modules\ember-cli\node_modules\rsvp\dist\rsvp.js:1531:9)
    at process._tickCallback (node.js:415:13)

The master version of the addon is unusable for me.

Including

    "ember-cli-async-button": "git://github.com/dockyard/ember-cli-async-button.git",

to package.json renders the app impossible to start. Running ember s results in an error "Missing template processor". Stacktrace.

This is reproducible on a fresh ember new foo project.

I have the following test which is trying to click a button is inside a modal.

  const selector = `button:contains("${buttonText}"), a:contains("${buttonText}")`;
  const found = find(selector, Ember.$('body'));
  assert.equal(1, found.length, `Should find the button or link with text "${buttonText}"`);
  click(selector, Ember.$('body'));  <--------- button click
  found.click();  <--------------- does not work either

In the modal I have tried the following button types.

  // (FAIL) If the button is an async button it does not fire the action at all
  {{async-button class="btn btn-primary" type="button" action=(route-action 'save' model) default="Proceed" pending="Saving..."}}

  // (SUCCESS) The same test but using a regular button and the action is fired
  <button class="btn btn-primary" type="button" onclick={{route-action 'save' model}}>Proceed</button>

The button click fires without any errors in both cases so it is not like the button is not found.

The reason for passing a context to click and find is that without it QUnit was unable to find the control as it is rendered inside the application template.

This will get rid of these warnings:

DEPRECATION: Overriding init without calling this._super is deprecated. Please call this._super.init && this._super.init.apply(this, arguments);addon:ember-cli-htmlbars at Function.Addon.lookup (/Users/devinus/Projects/rebelmail-dashboard/node_modules/ember-cli/lib/models/addon.js:1009:27)

Can we get the npm version updated to the latest version? The current one is from ages ago and there are some important fixes I need.

I have a fulfilled text defined but not a rejected, and when rejected the button stays with the fulfilled text rather than defaulting to default as the docs mention.

rejected
Special text used if the promise is rejected. If not provided will use the default value.

As mentioned by @bcardarella in this comment, it sounds like the original maintainers have placed this project into maintainence mode.

He mentioned that DockYard will be exploring other options with ember-concurrency, though I still feel that a convenience library like this is pretty valuable. Digging into the addon code, it seems like ember-concurrency could be utilized in this library to get rid of some of the !isDestroyed calls.

I am willing to take ownership of this library (along with others if they're interested) if DockYard no longer wants to actively maintain it.

Hi. I am trying to use the component in my template, after installing it via NPM.

  {{async-button action="save" default="Save" pending="Saving..."}}

However, when running the app, I get this error:

Uncaught Error: <my@view:search-map::ember831> Handlebars error: Could not find component or helper named 'async-button'

Any idea why?

I've found that phantomJS doesn't seem to respect the line below (making the type of the button truly submit). Is this a known issue/ does a workaround or explanation exist anywhere that I could read up on this? Mostly curious why chrome generates the correct html and phantom 1.9.16 doesn't

https://github.com/dockyard/ember-cli-async-button/blob/master/addon/components/async-button.js#L17

Thanks again for maintaining such a great OSS project !

Hey guys,

I just discovered this plugin a few hours ago and have been playing around with it. How can I display different blocks within the async-button component based on the state of the request?

I see that the classBinding comes for free via textState, but I would really like to be able to do something like (assume button passed into block):

{{#if button.isPending}}
    loader animation (svg)
{{else}}
    normal button text
{{/if}}

Whereas in the readme, simple text strings are used. How can I work with something more verbose/nuanced like the above? The code in #71 pretty much captures what I want to do, but it seems merging it was decided against, and I don't see any other real examples of what I'm trying to accomplish demonstrated elsewhere within the docs. Apologies if I've just overlooked something.

Thanks!

I was trying so many different combinations of making promises and returning them in the action...
I discovered in the demo, a callback is used.

http://jsbin.com/qokogasilu/1/edit?html,css,js,output

so, in my code, I now have this:

  actions: {
    // callback required for async button
    register(callback) {
      this.get('pathStore').storeCurrentRoute();

      let promise = this.get('model').save().then(user => {
        this.sendAction('successAction');
        user.unloadRecord();
      });

      callback(promise);
    },
  },

and now my async-button correctly stops being in the pending state upon promise return (presumably -- it's still unclear why there needs to be a callback with a promised passed - esp since this is an anti-pattern in ember).

This might be an obvious one, but how can I use this button with a spinning image when it's in the pending state?

Or am I better just going manual style like this: http://guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/spin_button_for_asynchronous_actions/

Thanks!

Ember: 1.11.1
Ember-Cli: 0.2.3

I just tried using the new syntax to allow extra arguments to be passed to the async-button action.

{{async-button shipment  action="advise" default="Advise" pending="Advising..." rejected="Failed Try Again"}}

Uncaught Error: Assertion Failed: You can only pass attributes (such as name=value) not bare values to a helper for a View found in 'bom@component:async-button:'

I have a form with validation and an async "submit" button,

I would like to make the button disabled when the validation fails OR while the async action is taking place.

Is there an elegant way to make it happen?

I recommend adding this use case to the documentation/demo because the form+validation+async+submit is a very common use case.

I can't get this plugin to work properly as callback is undefined.

Any thoughts as to why? This is specifically mentioned in the docs.

Ember 1.10.0
Ember Data 1.0.0-beta.16
Ember CLI 0.2.1
node: 0.12.0
npm: 2.7.3
jQuery 1.11.2

In my page controller I have created the following property:

foo: true

Now, in my page template I'm doing this:

{{ ember-cli-async-button default=(if foo 'Hello' 'World') }}

A button with no text as rendered!

At the same time, these work fine:

{{ ember-cli-async-button default=(if true 'Hello' 'World') }} -- rendes button with `Hello`
{{ ember-cli-async-button default=foo }} -- rendes button with `true`

I've tried reproducing the problem with a boilerplate component.

I have created an app/templates/components/x-bar.hbs file with the following content:

{{ default }}

Now, in my page template I'm doing this:

{{ x-bar default=(if foo 'Hello' 'World') }}

It renders as Hello. Thus I conclude that the issue is specific to ember-cli-async-button.

I'm getting this deprecation log in reference to async-button...

DEPRECATION: Accessing 'template' in <web@component:async-button::ember472> is deprecated. To determine if a block was specified to <web@component:async-button::ember472> please use '{{#if hasBlock}}' in the components layout.
        at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
        at raiseOnDeprecation (http://localhost:4201/assets/vendor.js:72907:7)
        at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
        at handleDeprecationWorkflow (http://localhost:4201/assets/vendor.js:72956:9)
        at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
        at deprecationCollector (http://localhost:4201/assets/vendor.js:72978:5)
        at HANDLERS.(anonymous function) (http://localhost:4201/assets/vendor.js:72821:7)
        at invoke (http://localhost:4201/assets/vendor.js:72833:7)
        at Object.deprecate (http://localhost:4201/assets/vendor.js:72912:5)

Is this due to my usage, or something within the addon?
thanks!