2016-12-02 77 views
0

我在奧裏利亞使用打字稿(2.0)的自定義元素,並希望結合一些值,但它只是不工作。這是我的例子:Aurelia大街與打字稿:結合使用性能不工作

myelement.html:

<template> 
    <div>${caption}</div> 
    <div>${unit}</div> 
</template> 

myelement.ts:

import { bindable } from "aurelia-framework"; 

export class MyElement { 
    // removing the @bindable doesn't change anything 
    @bindable public caption: string; 
    @bindable public unit: string; 
} 

用法:

<require from="./myelement"></require> 
... 
<myelement caption.bind="currentvalue" unit=" km"></myelement> 

的CurrentValue的屬性是使用定義的(在類定製元素)爲

public currentvalue: number = 11; 

的myelement正確插入,但佔位符與空文本替換(即刪除),甚至是「單位」,這只是一個文本。

什麼有趣的是它的 「單位」 工作的佔位符是:

myelement.html:

<template bindable="unit"> 
    <div>${caption}</div> 
    <div>${unit}</div> 
</template> 

在這種情況下,${unit}由 「公里」 所取代。

不知怎的Aurelia路上沒有得到自定義元素的HTML和視圖模型之間的連接。使用可綁定屬性的綁定工作,但僅限於未綁定到屬性。 myelement.js文件被正確加載(我使用SystemJS和AMD模塊)。 我錯過了什麼?

更新: - 在模板中的佔位符正確地「公里」取代

我myelement.ts @bindable@bindable()現在的「單位」正確綁定改變。但是使用屬性的綁定(我的例子中的標題)仍然不起作用。

更新2: 最後,我得到它的工作。父自定義元素(使用myelement)使用<require from="./myparentelement.html">所以它的視圖模型不連接被列入...

+1

我認爲你的元素名稱應該是''而不是'',因爲Aurelia默認使用連字符爲每個新的大寫單詞分隔類名。嘗試更改使用中的元素,看看它是否有所作爲。或者將您的課程名稱從「MyElement」更改爲「Myelement」。 – LStarky

+0

嘗試用括號編寫@bindable()。我前段時間閱讀了一些關於TypeScript中的錯誤,當缺少()時導致奇怪的行爲。另外,您將單位約束爲「km」,並且似乎期望字符串可以傳遞到UI,但在這種情況下km會被解釋爲屬性。創建一個單位屬性,並將其值設置爲'km',然後綁定到該 – mgiesa

+0

@Larkark這有助於加載正確的文件,但沒有綁定。 –

回答

0

沒有正確所需的父自定義元素: <require from="./myparentelement.html">代替<require from="./myparentelement">,我不得不使用@bindable()代替@bindable