Using literal JavaScript values in an Aurelia view

Question

I'm trying to make my component hidable by using "if" Template Controller. The problem is that it's visible even if I put false in it:

<template if.bind="${false}">
zzzzzzzz
</template>

if.bind="false" and both cases without bind bring same result. Am I doing something wrong? If not, could you please point to aurelia code debugging which may help me to get a clue?

Best regards, Eugene.

Answer 1

Interpolation

Using if.bind signals Aurelia to try to evaluate the expression. Therefore, you don't need to use the interpolation syntax. You only want to use interpolation when you are injecting data into a property that isn't managed by Aurelia. The typical use case is injecting text into an arbitrary element.

<p>Welcome to my website, you are the ${visitorCount} visitor!</p>

You may also use interpolation in other places where you would arbitrarily like to inject data, including html attributes.

<input placeholder="${currentRecordType}" />

Interpolation is a one-way binding. Read more here: http://aurelia.io/docs.html#string-interpolation

Bind

Now, the binding syntax is for hooking into behaviors enabled in Aurelia. Out of the box, this includes some templating logic, some attribute behaviors, and some other custom things.

Each attribute is designed to inspect where it is being used and how it should be driven. For example, the following binding will be one-way, as it does not accept input and only makes sense as a one way variable binding.

<div if.bind="sectionEnabled"></div>

However, the following binding will be two-way, as it accepts input and therefore will usually behave in the two-way manner.

<input value.bind="firstName />

Notice, though, that there is no syntax to say "this is a variable." In fact, Aurelia assumes you want to pass in a variable. If you don't, for example in the second case, you wouldn't require Aurelia and you would simply write:

<input value="firstName" />

You can read more about the bind syntax here: http://aurelia.io/docs.html#databinding

The answer

In your case, you're taking the wrong approach by trying to bind a literal value. Aurelia is looking for a variable named ${false}/false and most likely not finding it. You will want to create a variable in your viewModel to bind and instruct your view to bind to it:

viewmodel

class viewModel {
  ...
  constructor() {
    this.showTemplate = true;
  }
}

view

<template>
  <div if.bind="showTemplate">
    ... 
  </div>
</template>