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

2019年7月22日 178次阅读

我创建了一个
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看起来像这样：

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

和观点：

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

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

这有用吗？我也尝试将主ViewModel中的变量some​​Text定义为`@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)

最佳答案 我不确定你是否在寻找这个,但是,在WidgetCustomElement中引入一个@bindable文本属性可以使这更容易.我在你的插件上工作并介绍了一个@bindable wtext;在WidgetCustomElement中,使用此属性在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.

点赞