2015-05-26 3 views
2

Я использую пользовательский элемент с моим приложением 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), что будет очень полезно.

ответ

3

Это было проблемой в предыдущих сборках модуля aurelia/binding. Вот соответствующий вопрос (ы):

Я попробовал ваш вид/вид-модель в последней версии Aurelia и все работало. Вот скринкаст о том, что я видел: http://screencast.com/t/KqcuqXWjkU2

Убедитесь, что у вас последняя версия Аурелия компонентов, installed- шагов обновления здесь: http://blog.durandal.io/2015/05/01/aurelia-may-status-and-releases/

+0

Вот о чем я думал, но я хотел быть уверен. –

Смежные вопросы