如何在沒有視圖模型的情況下多用途的自定義元素中的可綁定？

我想在一個沒有視圖模型的自定義元素中以兩種稍微不同的方式使用單個綁定。如何在沒有視圖模型的情況下多用途的自定義元素中的可綁定？

現場input.html：

<template bindable="label,type,property"> 
    <div class="form-group"> 
    <label for="${property}">${label}</label> 
    <input id="${property}" value.bind="${property}" type="${type}"> 
    </div> 
</template>

我-form.html：

<form ...> 
    <field-input label="Email address" type="text" property="email"></field-input>

的所需的結果是：

<form ...> 
    <div class="form-group"> 
    <label for="email">Email address</label> 
    <input id="email" value.bind="email" type="text"> 
    </div>

的實際結果控制檯中出現錯誤：

ERROR [app-router] TypeError: sourceExpression.connect is not a function(…)

我在做什麼錯？

來源

2016-03-08 Seth

你必須使用bind而不是打印引號裏面的變量：

<template bindable="label,type,property,myValue"> 
    <div class="form-group"> 
    <label for.bind="property">${label}</label> 
    <input id.bind="property" placeholder.bind="property" value.bind="myValue" type.bind="type"> 
    </div> 
</template>

要綁定的HTML屬性每一次，只需撥打attr.bind="object"，不插標記${}

更新來自@ Seth的解決方案

由於您在自定義元素中有一個輸入元素，因此使用myValue.two-way="..."在撰寫視圖。請參閱2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel

來源

2016-03-08 22:58:07

當我這樣做時，它會綁定* property *的值，即「email」。這意味着輸入的值總是「email」而不是viewmodel.email的值。 – Seth

將'property'對象綁定到佔位符屬性，就像這個'placeholder.bind =「property」'。然後，創建另一個名爲'myValue'的可綁定屬性，將其綁定到值對象。像這樣'value.bind =「myValue」'然後，在父對象中，將'viewmodel.email'綁定到'myValue'。看到我更新的答案 –

我懷疑這是我必須做的。如果你更新了答案，我會接受它。 – Seth

如何在沒有視圖模型的情況下多用途的自定義元素中的可綁定？

回答

相關問題