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

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>

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

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

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 属性会使这一切变得容易得多。我研究了你的问题并在 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>

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

希望对您有所帮助。

编辑： 我分叉了你的代码来进行更改，这里是 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>

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

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

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

Binding to a Custom Element in a Template Part in Aurelia

aurelia