# Only show if button when model is saved

**URL:** <https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048>\
**Category:** Design\
**Created:** [January 8, 2015, 4:23pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048 "2015-01-08T16:23:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicolasd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nicolasd/32/10089_2.png) [@nicolasd](https://discuss.emberjs.com/u/nicolasd)\
**Post date:** [January 8, 2015, 4:23pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/1 "2015-01-08T16:23:31Z")

</div>

I am gettring rid of my ‘ifEqual’ hacks with computed properties and also wanted to clean up some variable settings.

The problem: The user can switch between ‘Published’ and ‘Unpublished’, if it’s unpublished he is also able to delete the content. But the ‘Delete’ Button only should be there if he saves the content with ‘unpublished’.

The binding is a problem here, because if I do it with a property like:

```
isUnpublished: Ember.computed.equal('status', 'unpublished'),

```

of course, he immediately shows the ‘Delete’ button.

What’s the best way to handle these things?

EDIT: Sure, I could set and unset a variable like ‘readyForGarbage’ in my functions, but imo this couldn’t be the right way

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 8, 2015, 7:05pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/2 "2015-01-08T19:05:43Z")

</div>

I’ve been meeting to figure out a way to inject [ember-buffered-proxy](https://github.com/yapplabs/ember-buffered-proxy) into Ember Data Models but just haven’t gotten the time yet. Sounds like you might want something similar. So basically changes made to a Model will not propagate throughout ember until it is saved to the server.

You could look at the [isDirty](http://emberjs.com/api/data/classes/DS.Model.html#property_isDirty) property on the Model. So something like this:

```
// app/model/foobar.js
import Ember from 'ember';
import DS from 'ember-data';

export default DS.Model.extend({
    status: DS.attr('string'),
    unpublished: Ember.computed.equal('status', 'unpublished'),
    isSaved: Ember.computed.not('isDirty'),
    isUnpublished: Ember.computed.and('unpublished', 'isSaved')
});

```

But it sounds like you are trying to move away from too many computed properties.?.

---

<div class="post-metadata">

**Author:** ![nicolasd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nicolasd/32/10089_2.png) [@nicolasd](https://discuss.emberjs.com/u/nicolasd)\
**Post date:** [January 8, 2015, 7:16pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/3 "2015-01-08T19:16:02Z")

</div>

I probably wrote that wrong, I actually want to use computed properties instead of my own handlebar helpers for ifs 😄

I tried it this, but still have one problem: My ‘status’ is a ‘belongsTo’ attribute - so the isDirty attribute of my model doesn’t change

---

<div class="post-metadata">

**Author:** ![Leeft](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/leeft/32/10094_2.png) [@Leeft](https://discuss.emberjs.com/u/Leeft)\
**Post date:** [January 8, 2015, 7:51pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/4 "2015-01-08T19:51:56Z")

</div>

Tried using `ember-buffered-proxy` directly on models, haven’t had much success with that. Here’s the approach I’m using (still needs a bit of work to continue working under Ember 2.0):

```nohighlight
import Ember from 'ember';
import BufferedProxyMixin from 'ember-buffered-proxy/mixin';

export default Ember.Component.extend({
  isEditing: false,
  content: {}, // the "new" model instance to work on
  model: null,

  article: function() {
    var article = Ember.ObjectProxy.createWithMixins( BufferedProxyMixin, {
      content: this.get('content')
    });
    article.initializeBuffer();
    if ( article.get('id') ) {
      this.disableEditMode();
    } else {
      this.enableEditMode();
    }
    return article;
  }.property('content'),

  enableEditMode: function() {
    this.set( 'isEditing', true );
  },

  disableEditMode: function() {
    this.set( 'isEditing', false );
  },

  actions: {

    edit: function() {
      this.enableEditMode();
    },

    save: function() {
      this.disableEditMode();
      this.get('article').applyBufferedChanges();
      this.sendAction( 'save', this.get('content') );
    },

    create: function() {
      this.disableEditMode();
      this.get('article').applyBufferedChanges();
      this.sendAction( 'create', this.get('content') );
    },

    delete: function() {
      this.disableEditMode();
      this.sendAction( 'delete', this.get('content') );
    },

    revert: function() {
      this.disableEditMode();
      this.get('article').discardBufferedChanges();
      this.sendAction( 'revert' );
    },

    cancel: function() {
      this.disableEditMode();
      this.get('article').discardBufferedChanges();
      this.sendAction( 'cancel' );
    }

  }
});

```

Used like this for existing articles:

```nohighlight
{{article-editing
  content=model
  save='saveArticle'
  delete='deleteArticle'
}}

```

Or for new articles:

```nohighlight
{{article-editing
  create='createNewArticle'
  cancel='returnToArticles'
}}

```

My routers look like:

```nohighlight
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    saveArticle: function( article ) {
      article.save().then( function() {
        article.reload();
      });
    },

    deleteArticle: function( article ) {
      var self = this;
      article.destroyRecord().then( function() {
        self.transitionTo( 'articles' );
      });
    }
  }
});

```

Probably not perfect, but maybe it helps 😄

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 9, 2015, 5:55am UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/5 "2015-01-09T05:55:43Z")

</div>

Thanks @Leeft, I’ll review your stuff in the morning. Bummer on the ember-buffered-proxy, I had some hope…

Just thought of another tactic I’m going to try. Instead of the html form modifying the model directly, I’ll have it modify properties on the controller. Those properties will [Ember.computed.oneWay()](http://emberjs.com/api/#method_computed_oneWay) to the model properties, to get the default/current values. Then on form submit, the action handler will apply the (potentially) changed properties from the controller to the model, try `.save()`ing the model right away and `.rollback()` if it fails. Of course there will be a short period where the changes will appear throughout Ember while the changes are saved… Example: [JS Bin - Collaborative JavaScript Debugging](http://emberjs.jsbin.com/fojoneyubu/1/)

---

<div class="post-metadata">

**Author:** ![Leeft](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/leeft/32/10094_2.png) [@Leeft](https://discuss.emberjs.com/u/Leeft)\
**Post date:** [January 9, 2015, 7:41am UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/6 "2015-01-09T07:41:20Z")

</div>

> [@Panman8201](#):
>
> Thanks @Leeft, I’ll review your stuff in the morning. Bummer on the ember-buffered-proxy, I had some hope…

Well, I _am_ using buffered-proxy, just not directly applied to the model class. Instead I wrap the model with it within my component.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 9, 2015, 2:02pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/7 "2015-01-09T14:02:04Z")

</div>

Ah, I see. Almost like a container for the changes. I meant bummer on the buffer on a model directly. What issues did you run into?

---

<div class="post-metadata">

**Author:** ![Leeft](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/leeft/32/10094_2.png) [@Leeft](https://discuss.emberjs.com/u/Leeft)\
**Post date:** [January 9, 2015, 2:07pm UTC](https://discuss.emberjs.com/t/only-show-if-button-when-model-is-saved/7048/8 "2015-01-09T14:07:12Z")

</div>

I can only remember I had a good reason, now if only I could remember the actual reason … ☹