模板中的可绑定Iterables

Question

我已经启动并运行了一个Aurelia应用程序，并且我正在使用一个带有可绑定参数的模板。

<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>

我像这样传递它，这里的吸引子是项的数组。

这基本上不是我想要的那样。在本例中，${textitems}给出了正确的内容，但当它到达repeat for部分时，aurelia抱怨它(textitems)是不可迭代的。

​

​

后来我发现这是因为它变成了正在输出的数组的字符串。所以它变成了'one,two'而不是['one','two']

如果是这样的话，我肯定有更好的方法将这些数据传递到模板中。

Bindable显然看起来是最干净的方法，但我喜欢被证明是错误的。

感谢您的时间，似乎还没有人提出这个问题，但我只是刚刚开始，我认为它会帮助其他人。

Answer 1

在最初的模板调用中，我需要将.bind添加到可绑定部分。

textitems="${attractors}" -使传递的值成为呈现为字符串的数组。

textitems="attractors" -导致传递的值在字面上是单词attractors

textitems.bind="attractors" -使传递的值成为数组-正如预期的那样。( Jesse de Bruijne建议)

可以假定，Aurelia需要.bind将项目作为对象来处理，而不是字符串呈现。${}语法导致模板输出文本，呈现任何东西，只需输入变量的名称即可输出名称本身。