在 Aurelia 的模板部件中绑定到自定义元素

Question

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

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

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

作为参考，小部件视图如下所示：

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

而视图模型是：

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 中的数据绑定到子元素中，其中子元素如下所示：

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

和观点：

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

问题是无论我使用什么表达式（我目前正在尝试$parent.$parent.someText）我都无法让绑定工作。

这应该有效吗？我还尝试在主 ViewModel 中将变量 someText 定义为“@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

我不确定您是否正在寻找它，但是，在 WidgetCustomElement 中引入 @bindable text 属性会使这一切变得容易得多。我在你的 plunk 上工作并在WidgetCustomElement 中引入了一个@bindable wtext;，使用此属性在app 视图中绑定someText，如下所示：

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

Answer 2

从那以后，我在 Aurelia 文档中偶然发现了一些详细说明 Template Parts 的内容。在 example.js 中定义了一个 bind() 方法，该方法将 bindingContext 分配给本地成员 this.$parent。

这意味着我所要做的就是在我的小部件的视图模型中定义以下内容：

bind(bindingContext) {
   this.$parent = bindingContext;
}

那么child-element与以下内容绑定：

<child-element text.bind="$parent.someText"></child-element>

我已经分叉了我原来的 plunkr 来证明它是有效的。

鉴于repeat-for 提供了它自己的$parent，我误以为这里自动定义了一个！