Как создать сложную привязку в Aurelia?

#typescript #binding #aurelia

#typescript #привязка #aurelia

Вопрос:

Отредактировано на предмет опечаток

В настоящее время я пытаюсь разобраться с Aurelia (aurelia.io ). Пока все довольно хорошо, и в целом мне это нравится, но я застрял в попытке привязать пользовательский компонент к свойству виртуальной машины.

Моя виртуальная машина (YardMap.ts) имеет свойство, представляющее собой массив объектов:

 export class YardMap {
...
    locationsData:LocationModel[];
...
}

Соответствующий вид (YardMap.html ) использует компонент, которому я хотел бы иметь возможность передавать данные с виртуальной машины:

 <template>
    <require from="./resources/map-viewer"></require>
    ...
    <map-viewer id="mapWrapper" class="threeContainer" locationsData.bind="locationsData"></map-viewer>
    ...
</template>

И, наконец, сам мой компонент (map-viewer.ts) имеет связываемое свойство того же типа, что и у виртуальной машины, и обработчик propertychanged:

 @noView()
export class MapViewer {
    @bindable locationsData:LocationModel[] = [];

    locationsDataChanged(newValue:LocationModel[]){
        console.log(newValue.length);
    }
}

Этот последний метод никогда не вызывается. Если бы мое свойство было примитивом, оно работало бы легко, но если это объект или массив объектов, я, похоже, не могу заставить привязку работать.

Есть идеи?

1. У меня не было проблем с привязкой к объектам, еще не нужно было привязывать массив. Что, если вы напишете locations-data вместо locationsData в представлении? Это единственное различие, которое я вижу между вашим кодом и моим. Хорошо. Это и @noView, но вы сказали, что это работает с примитивами, поэтому я бы предположил, что массивы тоже должны работать. Вот так: <идентификатор map-viewer=»mapWrapper» class=»threeContainer» locations-data=»locationsData»></map-viewer>

2. Черт, я люблю этот сайт! Я 2 часа ломал голову над этой проблемой, и мне просто пришлось опубликовать свой вопрос здесь, чтобы вы пришли и спасли меня от уничтожения моего стола! Вы правы, я забыл об этом соглашении camelCase в коде, дефисах в шаблонах… Спасибо!

3. Потрясающе! Я опубликую это в качестве ответа

Ответ №1:

Напишите locations-data вместо locationsData в представлении, например:

 <map-viewer id="mapWrapper" class="threeContainer" locations-data.bind="locationsData"></map-viewer>

Ответ №2:

Вам нужно использовать property.bind or property.two-way (если вы также хотите передавать данные из представления в модель) в view model таким образом:

 <map-viewer id="mapWrapper" class="threeContainer" locations-data.two-way="locationsData"></map-viewer>