CODEWITHSUNDEEP
ember.jshandlebars.jsconditional-statements
Giedrius
Giedrius

Reputation: 1688

ember js compare values in DOM if statement or at least in a View with value from DOM

I been trying to compare some values in handlebars if statement {{#if value == 'otherValue'}}, obviously unsuccessfully because handlebars do not like this and expecting a string, boolean, or function name. Well that would be ok, but then I tried to pass parameter in the function like you can do with {{action}} helper, and well that didn't workout either, got this in console

Error: assertion failed: You must pass exactly one argument to the if helper

So then I decided to do this in a View, even so ember js guides points that accessing template values in-scope is unusual and they provide only poor paragraph with no examples. http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_accessing-template-variables-from-views

So when I tried to do this, I got a problem of accessing those variables, I tried this way this.get('controller.templateVariables') and via full path to View, but value was either undefined or .get() wasn't exists as a method.

So at this moment I decided to save variable in the DOM data property, but turns out this {{#view App.TabsView data-title="{{tab}}"}} is going to literately give me a string {{tab}} when I try to access it from View with this.get('data-title').

The only way left to me was to insert additional element inside view and store variable there, and afterwards access it with jQuery class selector. but element is not yet exist in the DOM at the time of isVisible function gets executed, so I have no access to values at that time. That explains why this.get('element') was returning null.

Similar examples on ember js mostly ends up with something like if (someLogic) {}, but how I can do any logic when there is no variables available to me.

Question

To simplify my question - is there a way how I can do such a thing in ember js? Simple as

// have objects stored in controller
var obj = [{title:'Tab1'}, {title:'Tab2'}, {title:'Tab3'}];

// loop via them in the DOM
obj.forEach(function(tab) {
    // do this kind of comparison
    if( tab.title == currentTab() ) {
        // do something here
    }
});

If that is not possible, then what would be the other way to achieve similar functionality?

Upvotes: 1

Views: 1404

Answers (2)

Wildhoney
Wildhoney

Reputation: 4969

I think the best way for me to demonstrate this is with a heavily commented JSFiddle that I've put together for you: http://jsfiddle.net/PbLnm/

Please ask any questions below if you're not sure about anything.

The main part which determines when to add the active class is in the computed property:

// Determine if the object we have for this view is the same as the activeTab's object. If it is the same, then this view is the current active tab.
active: function() {
    return Boolean(this.get('parentView.activeTab') == this.get('tab'));
}.property('parentView.activeTab')

Upvotes: 0

ken
ken

Reputation: 3745

You can write a handlerbar helper to do this

{{activeTab tab}}

Handlebars.registerHelper('activeTab', function(tab) {

})

See a question about the same issue

Or look at existing helpers to write your own

Upvotes: 1

Related Questions