aurelia - 在 Aurelia 的模板部件中绑定(bind)到自定义元素

Question

我创建了一个 plunkr来说明我遇到的问题。

我正在创建一个仪表板，该仪表板目前包含四个不同的项目。我将这些项目中的每一个都创建为自定义元素，然后将它们包装在一个名为 Widget 的自定义元素中，为它们提供框架、标题和样式。这是该片段的样子:

<widget title="A Widget" icon="fa-question">
  <template replace-part="item-template">
    <child-element text.bind="$parent.$parent.someText"></child-element>
  </template>
</widget>

作为引用，小部件 View 如下所示:

<template>
  <require from="./widget.css!"></require>
  <div class="widget">
    <div class="widget-header">
      <i class="fa ${icon}"></i>
      <h3>${title}</h3>
    </div>
    <div class="widget-content">
      <template replaceable part="item-template"></template>
    </div>
  </div>
</template>

View 模型是:

import {bindable} from "aurelia-framework";
export class WidgetCustomElement {
  @bindable title;
  @bindable icon;
  @bindable show; // This is something I want the child element
                  // to be able to bind to and control but haven't
                  // got there yet!!
}

但请注意，我正在尝试将 ViewModel 中的数据绑定(bind)到子元素中，其中子元素如下所示:

import {bindable} from "aurelia-framework";
export class ChildElementCustomElement {
  @bindable text;
}

和观点:

<template>
  <p>The widget passed us : ${text}</p>
</template>

问题是无论我使用什么表达式(这里我目前正在尝试 $parent.$parent.someText )我都无法使绑定(bind)工作。

这应该工作吗？我也试过定义变量 someText在主 ViewModel 中作为 `@bindable someText' 但这会引发以下异常:

Unhandled promise rejection TypeError: Cannot read property 'some-text' of null
    at BindableProperty.initialize (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/github/aurelia/templating@0.14.4/aurelia-templating.js:2448:33)
    at new BehaviorInstance (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/github/aurelia/templating@0.14.4/aurelia-templating.js:2199:23)
    at HtmlBehaviorResource.create (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/github/aurelia/templating@0.14.4/aurelia-templating.js:2821:30)
    at https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/github/aurelia/templating@0.14.4/aurelia-templating.js:3385:27
    at f (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:1415:56)
    at https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:1423:13
    at b.exports (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:453:24)
    at b.(anonymous function) (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:1625:11)
    at Number.f (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:1596:24)
    at q (https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.4.0/jspm_packages/npm/core-js@0.9.18/client/shim.min.js:1600:11)

Answer 1

我不确定您是否正在寻找这个，但是，引入 @bindable text位于 WidgetCustomElement 的属性(property)让这一切变得容易得多。我在你的 plunk 上工作并介绍了一个 @bindable wtext;在 WidgetCustomElement , 使用此属性绑定(bind) someText在 app如下图:

<widget title="A Widget" icon="fa-question" wtext.bind="someText">
   <template replace-part="item-template">
        <child-element text.bind="wtext"></child-element>
        <!--<child-element text.bind="$parent.$parent.someText"></child-element>-->
   </template>
</widget>

这有效。但是，正如我所说，我不确定这种方法是否适合您。我假设你的小部件将主要包含一个单个子元素，如果这个假设是正确的，那么这应该可以工作，但是如果一对多映射(单个小部件中有许多子元素)，则需要其他东西。

希望这可以帮助。

编辑:我让你的 plunk 做出改变，这里是 link到那个。