templating: problems using @inlineView

Are there any known problems with using @inlineView?

The following class is not rendered. In fact, the application which uses that class stops at: DEBUG [aurelia] Configured plugin aurelia-materialize-bridge. (which is the plugin the component is defined in). Unfortunately, it does so without any error message.

When I copy the template into a separate .htmlfile, all works.

Implementation:

import { bindable, bindingMode, customElement, inject, inlineView } from 'aurelia-framework';

@customElement('md-card')
@inject(Element)
@inlineView(`
  <template>
  <div class="card">
    <div class="card-content">
      <span class="card-title">${title}</span>
      <card>
      <content></content>
      </card>
    </div>
  </div>
  </template>
`)
export class MdCard {
  @bindable({
    defaultBindingMode: bindingMode.oneTime
  }) title;

  constructor(element) {  }
}

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

One way to avoid escaping $ sign is to avoid back-tick syntax, use old single quote (don’t use double quote, otherwise you need to escape lots of double quote in html) with back-slash to support multiple lines.

The trade-off is now you need to escape single quote if there is any.

const str = '<template>\
  ${value}\
</template>\
';

Make sure there is no extra spaces at right side of \, otherwise syntax error.

Note the back-slashes are NOT part of the string, they are to tell JavaScript engine to join two lines. It also means if you want new lines, you have to do it literally.

const str = '<template>\n\
  ${value}\n\
</template>\n\
';

3cp on Dec 20, 2018

Please is there a way inlineView can be improved upon to allow interpolation without escaping?

smithaitufe on Oct 14, 2016

Ok, it’s not a bug in Aurelia. Sorry I didn’t catch this from first looking at your code, you need to escape the interpolation because that is actually JS syntax for interpolation. You need this:

<span class="card-title">\${title}</span>

I was debugging in Chrome and received an error that “title was not defined” which clued me in to the problem. What browser were you using? did you see a similar error?

EisenbergEffect on Jan 25, 2016