2-сторонняя привязка данных в пользовательских элементах Aurelia - привязка настраиваемого элемента к родительской схеме просмотра.

Question

В моем приложении я сделал много «сервисов», которые я могу вводить в своих режимах просмотра, чтобы сохранить избыточность и время.

Теперь я ищу еще один шаг и сделаю эти элементы формы (выберите, текст, флажки - выберите раскрывающийся список для стартеров) и превратите их в пользовательские элементы, введя службу только в пользовательский элемент.

Я могу заставить его работать в некоторой степени. Пользовательский элемент (выберите в этом случае) отображается, когда я требую его в «родительском» представлении, однако, когда я изменяю выбранное значение пользовательского элемента select, он не привязывается к «родительской» модели просмотра, что является моим требованием ,

Я хочу, чтобы иметь возможность привязать мое выбранное значение от пользовательского элемента к свойству в «родительской» модели просмотра через атрибут bind в его шаблоне.

Я расскажу о небольшом фрагменте кода за несколько минут.

create.js (то, что я имею в виду, как родительский ViewModel)

import {bindable} from 'aurelia-framework'; 
export class Create{ 
    heading = 'Create'; 
    @bindable myCustomElementValue = 'initial value'; 
} 

create.html (родительский вид)

<template> 
    <require from="shared/my-custom-element"></require> 
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom> 
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p> 
</template> 

мои-custom.js

import { inject, bindable} from 'aurelia-framework'; 
import MyService from 'my-service'; 

@inject(MyService) 
export class MyCustomCustomElement { 
    @bindable selectedValue; 

    constructor(myService) { 
     this.myService = myService ; 
    } 

    selectedValueChanged(value) { 
     alert(value); 
     this.selectedValue = value; 
    } 

    async attached() { 
     this.allSelectableValues = await this.myService.getAllValues(); 
    } 
} 

Что происходит изначально, представление create.html выводит «начальное значение», и когда я изменяю значение выбранного пользовательского элемента, вновь выбранная оценка e получает предупреждение, но он не обновляет связанную родительскую переменную, которая по-прежнему просто отображает «начальное значение».

Answer 1

Есть несколько вопросов здесь:

1. Вам нужно Шашлычные случае любые имена свойств в DOM из-за прецедентным нечувствительности

   selected-value.bind="property"

   не

   selectedValue.bind="property"

2. Вам необходимо связать двусторонний. При создании @bindable с использованием декоратора один из аргументов - BindingMode, который вы используете для установки режима привязки по умолчанию.

   Aurelia устанавливает некоторые разумные значения по умолчанию, например. по умолчанию для input value.bind=".." два путей без явного

   Если вы не хотите, чтобы установить режим привязки по умолчанию, вы можете просто быть явным с вашим обязательным:

   selected-value.two-way="prop"

Надеется, что это помогает :)

Редактировать: Я думаю, что API немного изменился после этого ответа.

@bindable декоратор имеет следующий сиговых:

bindable({ 
    name:'myProperty', 
    attribute:'my-property', 
    changeHandler:'myPropertyChanged', 
    defaultBindingMode: bindingMode.oneWay, 
    defaultValue: undefined 
}) 

Один из лучших мест, чтобы проверить для быстрой ссылки является Aurelia чит-лист в документации:

http://aurelia.io/docs/fundamentals/cheat-sheet