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类型而没有实际指定它，当我将它传递给my-成分：

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

我希望它能在bind上恢复对象，因此它具有默认值，如下所示:(实际上是MyObject的类型）

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

可选择如果我自己在绑定或类似的情况下进行映射，但我不能在MyComponent中创建MyObject（this）的新实例但是Aurelia错误并且不允许我将MyComponent注入到MyObject中。（不知道怎么做，但我想知道）

Answer 1

我想出了如何做到＆＃34;可选＆＃34;方式我希望它完成这是一个荒谬的工作量来获得这样的工作。如果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>

OR

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

这就是我想要实现的目标。

Aurelia将JSON绑定到组件数组，并保留默认对象属性

1 个答案: