如何在没有视图模型的情况下多用途的自定义元素中的可绑定？

我想在一个没有视图模型的自定义元素中以两种稍微不同的方式使用单个绑定。如何在没有视图模型的情况下多用途的自定义元素中的可绑定？

现场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

如何在没有视图模型的情况下多用途的自定义元素中的可绑定？

回答

相关问题