Question

如何从ViewModel向View添加组件。例如，我有以下内容：

我将一个服务注入到组件中。然后从组件中获取数据，当我得到响应时，我将data属性设置为获取的数据。在此之后，我想将组件安装到View，并将获取的数据作为可绑定。

this.service.get()
.then(response => response.json())
.then(data =>{ 
    this.data = data.results
    //Mount element to View here: <component data.bind="data"></component>
})

我问这个问题，因为如果我在获取时设置了值，并在View to this：

<component data.bind="data"></component>

它传递一个空对象。我尝试在canActivate和activate方法上使用该服务。

组件：

export class Component{
   @bindable data
   bind(){
      console.log(this.data)
   }
}

Answer 1

我将您的代码复制到gist并在gist.run上运行：https://gist.run/?id=04907ff8d8b6d8b4aee625669d8571a3

它按预期运行。我甚至更新了它以设置承诺内的数据。

现在，如果您希望在data属性发生更改时收到通知，则需要实现名为${propertyName}Changed(newValue, oldValue)的函数，因此在这种情况下，dataChanged(newValue, oldValue)。我创建了一个单独的要点，以说明您可能希望如何更改代码：https://gist.run/?id=34a01ca3f600470691d5b91c9131f33b

您会在我的代码中注意到我没有使用newValue和oldValue参数。我故意这样做是为了让你知道Aurelia仍然设定了房产价值。当属性值发生变化时，回调就是让代码执行操作。

Answer 2

绑定到的“data”字段是使用组件的ViewModel上的字段，而不是组件中的字段。

Aurelia在ViewModel

2 个答案: