綁定到奧裏利亞的模板部件中的自定義元素

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）我不能綁定工作。

應該這樣工作嗎？我也試着定義主視圖模型爲'@Bindable someText」變量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

我自從偶然發現了Aurelia文檔中的一些細節Template Parts。在example.js a bind()定義了將bindingContext分配給本地成員this.$parent的方法。

這意味着所有我需要做的就是定義在我的插件的視圖模型如下：

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

然後child-element綁定了以下內容：

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

我分叉我的原始plunkr來演示它的工作。

鑑於repeat-for提供了它自己$parent我誤以爲有一個自動定義在這裏！

Answer 2

我不知道你是否正在尋找這樣或不是，但是，引入@bindable textWidgetCustomElement中的房產使得這一切變得更加簡單。我曾在你普拉克和WidgetCustomElement推出@bindable wtext;，使用這個屬性綁定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。