Я использую пользовательский элемент с моим приложением Aurelia. Когда я связываю данные с моей модели-представления с пользовательским элементом, он работает нормально. Даже если я вношу некоторые изменения в данные элемента управления элемента, это изменение также отражается на данных в моей модели представления, благодаря двусторонней привязке данных.Aurelia Custom Elements привязка данных
Однако, если я вношу некоторые изменения в данные из модели представления (используя javascript), данные не обновляются в пользовательском элементе. Я попробовал эту проблему для более простой настройки.
Простой вид Модель
export class Playground {
public testObj: any;
counter = 0;
constructor() {
this.testObj = {
prop1: "This is prop1 value"
, collection2: [{ id: "item21" }]
}
}
updateProp1() {
alert("before update: "+this.testObj.prop1);
this.testObj.prop1 = "Sayan " + this.counter++;
alert(this.testObj.prop1);
}
verifyChange() {
alert(this.testObj.prop1);
}
}
Simple View
<template>
<h1>
Playground
</h1>
<div >
<div repeat.for="item of testObj.collection2">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="prop1"
value.bind="$parent.testObj['prop1']">
</div>
</div>
</div>
<button click.delegate="updateProp1()" class="btn btn-primary"> Update Prop1 </button>
<button click.delegate="verifyChange()" class="btn btn-primary"> Verify Change </button>
</div>
</template>
Теперь всякий раз, когда я нажимаю Verify Change
после изменения значения в текстовое поле, измененное значение приходит в боевой готовности , Но, если я нажму кнопку Update Prop1
, значение prop1
будет обновлено, но это изменение не отразится на представлении. Я точно не знаю, чего у меня нет.
Примечание: Вместо использование $parent.testObj['prop1']
, если $parent.testObj.prop1
используются, то привязка данные работают как положено. Тем не менее, мой фактический пользовательский элемент имеет общий вид, а имя свойства неизвестно раньше, поэтому кажется, что мне нужно использовать нотацию $parent.testObj['prop1']
вместо точечной нотации: $parent.testObj.prop1
.
По указателю/предложению/обратной связи оцениваем.
Обновление: Если кто-то может указать разницу между нотной нотой и индексацией w.r.t. aurelia data-binding (я уже проверил this), что будет очень полезно.
Вот о чем я думал, но я хотел быть уверен. –