Aurelia привязывает JSON к массиву компонентов с сохранением свойств объекта по умолчанию

Question

Я пытаюсь сделать следующее:

<my-component myobjarray.bind="[{a: 'ID'}, {b: 2}]"></my-component>

---

@customElement('my-component') 
export class MyComponent
{    
    @bindable myobjectarray: MyObject[] = [];
}

---

@inject(MyComponent)
@customElement('my-object') 
export class MyObject
{    
    constructor(component: MyComponent) {
    }
    @bindable a:string = 'Hello';
    @bindable b:number = 1;
}

Проблема заключается в том, что после связывания MyComponent.myobjectarray myobjectarray содержит следующие значения, потому что я только что отправил обычный объект JSON, но я хочу, чтобы он имел тип MyObject, фактически не определяя его как таковой при передаче его моему компоненту:

[0] a = "ID", b????
[1] a????, b = 2

Я хотел бы, чтобы он оживил объект на привязке, чтобы он имел значения по умолчанию и выглядел следующим образом: (На самом деле типы MyObject)

[0] a = "ID", b = 1 (default value)
[1] a = "Hello" (default value), b = 2

НЕОБЯЗАТЕЛЬНО было бы хорошо, если бы я сам сделал сопоставление в привязке или чем-то подобном, но я не могу создать новый экземпляр MyObject(this) в MyComponent, но ошибки Aurelia и не позволяют мне вводить MyComponent в MyObject. (Не уверен, как это сделать, но я хотел бы знать)

Answer 1

Я понял, как сделать это "по желанию" так, как я хотел, чтобы это было нелепой работой, чтобы получить что-то подобное. Было бы лучше, если бы bind мог просто автоматически добавлять подкомпоненты (без ввода их в шаблон), когда они не являются полными объектами JSON типа подкомпонента. Я все еще открыт для лучшего / правильного способа сделать это, но это мое текущее решение:

В MyComponent добавьте:

    constructor(private bindingEngine:BindingEngine, private viewCompiler:ViewCompiler, private viewSlot:ViewSlot, private container:Container, private resources:ViewResources){
    }

    myobjectarrayChanged(value) {        
        this.myobjectarray = [];
        var item:any;
        var sItems = '<template>';
        for(let item of value){
            sItems += `${'<my-object'}
                ${item.hasOwnProperty('a') ? ' a="' + item.a + '"' : ''}
                ${item.hasOwnProperty('b') ? ' b="' + item.b + '"' : ''}
                ${'></my-object>'}`;
        }
        sItems += '<template>';

        var viewFactory =  this.viewCompiler.compile(sItems, this.resources);
        var bindingContext = null; 
        var view = viewFactory.create(this.container, bindingContext);
        this.viewSlot.add(view);
        this.viewSlot.attached();
    }

И в MyObject добавьте это в конструктор:

component.myobjectarray.push(this);

Это позволяет вам указать ваш компонент, например:

<my-component myobjarray.bind="[{a: 'ID'}, {b: 2}]"></my-component>

ИЛИ ЖЕ

<my-component>
    <my-object a='ID'></my-object>
    <my-object b='2'></my-object>
</my-component>

Что я и пытался сделать.