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中的数据绑定到子元素中，子元素看起来像这样：

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＆＃39;但是会引发以下异常：

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属性会让这更容易。我在你的插件上工作并在@bindable wtext;中引入WidgetCustomElement，使用此属性绑定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>

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

希望这有帮助。

编辑：我分叉你的插件进行更改，这里是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，我错误地认为这里有一个自动定义!!

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

2 个答案: