1

I have an Aurelia application up and running and I am using a template with bindable parameters.

<template bindable="textitems">
  ${textitems}
  <section id="one" class="wrapper">
    <div class="inner flex flex-3">
      <div class="flex-item left">
        <div repeat.for="textitem of textitems">
          <p>${textitem}</p>
        </div>
      </div>
    </div>
  </section>
</template>

And I am passing it in like this <attractor textitems="${attractors}"></attractor> where attractors is the array of items.

This basically is not behaving as I would like for it to. ${textitems} is spitting out the right content in this case one,two but - when it gets to the repeat for section - aurelia complains that it (textitems) is not iterable.

enter image description here

I have since found out that this is because it becomes a string of the array being output. So it becomes 'one,two' rather than ['one','two']

If so there must be a better way for me to pass this data down into the template.

Bindable definately seems the cleanest method, but Id love to be proven wrong.

Thanks for your time, no one seems to have been presented with this issue yet, but I am just getting started, and I think it will help others.

Nick Hutchins
  • 11
  • 2
  • Have you tried using the [Aurelia Inspector for Chrome](https://chrome.google.com/webstore/detail/aurelia-inspector/ofemgdknaajmpeoblfdjkenbpcfbdefg?hl=en) to debug your application? And could you maybe share a little bit of what you're passing down and how? – Jesse Aug 03 '18 at 09:04
  • Ill take a look, Ill need to take a quick check to see how it works, bbut thanks, that should put me on the right path. As I say in this case I am passing down just an array with two strings 'one' + 'two'. But I have this behaviour repeated in other areas too. I pass it down as follow - `` Where attractors is the array. – Nick Hutchins Aug 03 '18 at 09:36
  • Huh - yeah, Its being recieved as a string. – Nick Hutchins Aug 03 '18 at 09:38
  • Try using `textitems.bind="attractors"` instead, I have a feeling that the `${}` syntax might parse it weirdly. – Jesse Aug 03 '18 at 09:39
  • Thanks @JessedeBruijne – Nick Hutchins Aug 03 '18 at 09:49
  • ${} is string interpolation. Of course it is parsed to a string. – Schadensbegrenzer Aug 06 '18 at 07:25
  • @Schadensbegrenzer - please consider that the person asking the question (e.g. i.e. me) may just be starting out with aurelia. It is important to be polite and patient with those who are in my situation. – Nick Hutchins Aug 07 '18 at 08:04
  • I was neither impatient nor unpolite. Just confirming the assumption, if the given param was "converted" to a string. – Schadensbegrenzer Aug 07 '18 at 08:35

1 Answers1

0

I needed to add .bind to the bindable section in the original template call.

textitems="${attractors}" - Caused the passed value to be the array rendered as a string.

textitems="attractors" - Caused the passed value to literally be the word attractors

textitems.bind="attractors" - Caused the passed value to be the array - as intended. (suggested by Jesse de Bruijne)

One can presume that Aurelia needs .bind to handle the item as the object it is and not a string rendering of it. The ${} syntax causes the template to spit out the text rendering of whatever the thing is and just putting the name of the variable just spits out the name itself.

Nick Hutchins
  • 11
  • 2
  • I am fairly certain the `${}`-syntax is meant purely to be used in HTML rendering, you should be using `.bind` wherever you can. – Jesse Aug 03 '18 at 09:54
  • Yeah - I tried to allude to the ${} is for output thing - but clearly not well enough! I didn't see the need to use bind at first since it was passing the text down without issue, you can see why someone with my aurelia exp might be confused by this! – Nick Hutchins Aug 03 '18 at 09:59