CODEWITHSUNDEEP
ember.js
Vijay Malik
Vijay Malik

Reputation: 117

How to dynamically enable/disable link-to in ember

I have this link-to that will be enabled/disabled depending on the property "linkDisabled". Initially the property will be true and this link-to will be disabled.

{{#link-to "databinding2" disabled=linkDisabled}}Databinding2{{/link-to}}

Whenever I click on this button I want to toggle the link between disable and enable without reloading any component.

 <button {{action 'changeLinkState'}} >Click here</button>

This is how I want to handle it in the controller.

App.ApplicationController=Ember.Controller.extend({
linkDisabled:true,
actions:{
    changeLinkState:function(){
        if(this.linkDisabled==true)
        {
            this.linkDisabled=false;
        }
        else
        {
            this.linkDisabled=true;
        }
    }
}

});

Is it possible to do so without making asynchronous call?
As the property linkDisabled is being used in {{#link-to}}, so, it's throwing error when I try to modify it true or false.

Uncaught Error: Assertion Failed: You must use Ember.set() to set the `linkDisabled` property (of <App.ApplicationController:ember294>) to `false`.

What's the proper way to do it?

Upvotes: 2

Views: 1675

Answers (2)

Matt Jensen
Matt Jensen

Reputation: 1564

As of Ember 3.* the way to do this is:

{{!-- Statically --}}
{{link-to 'photoGallery' disabled=true}}

{{!-- Dynamically --}}
{{link-to 'photoGallery' disabledWhen=controller.someProperty}}

Source in Ember API Docs

Upvotes: 4

Pavol
Pavol

Reputation: 1220

In case you insist on using set/get:

Ember.set(this, 'linkDisabled', !(Ember.get(this, 'linkDisabled')));

But I would recommend to use Ember.Object.toggleProperty(), API link here, try sth like:

this.toggleProperty('linkDisabled');

Upvotes: 2

Related Questions