[英]Aurelia Custom Elements data binding
I am using a custom-element with my Aurelia app. 我在Aurelia应用程序中使用了自定义元素。 When I am binding data from my view-model with the custom-element, it is working fine.
当我将视图模型中的数据与custom元素绑定在一起时,它工作正常。 Even if I make some changes in the data in the custom-element control, the change is also reflected to the data in my view model, thanks to the two-way data binding.
即使我在自定义元素控件中对数据进行了一些更改,由于双向数据绑定,更改也反映到了视图模型中的数据上。
However, if I make some changes in the data from the view model (using javascript), the data is not updated in the custom-element. 但是,如果我对视图模型中的数据进行了一些更改(使用javascript),则不会在自定义元素中更新数据。 I have replicated this problem for a simpler setting.
我已经将此问题复制为一个更简单的设置。
Simple View Model 简单视图模型
export class Playground {
public testObj: any;
counter = 0;
constructor() {
this.testObj = {
prop1: "This is prop1 value"
, collection2: [{ id: "item21" }]
}
}
updateProp1() {
alert("before update: "+this.testObj.prop1);
this.testObj.prop1 = "Sayan " + this.counter++;
alert(this.testObj.prop1);
}
verifyChange() {
alert(this.testObj.prop1);
}
}
Simple View 简单检视
<template>
<h1>
Playground
</h1>
<div >
<div repeat.for="item of testObj.collection2">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="prop1"
value.bind="$parent.testObj['prop1']">
</div>
</div>
</div>
<button click.delegate="updateProp1()" class="btn btn-primary"> Update Prop1 </button>
<button click.delegate="verifyChange()" class="btn btn-primary"> Verify Change </button>
</div>
</template>
Now whenever I click Verify Change
after changing the value in textbox, the changed value comes in the alert. 现在,每当我在文本框中更改值后单击“
Verify Change
,更改的值就会出现在警报中。 But, if I click the Update Prop1
button, the prop1
value gets updated, but the change doesn't reflect in the view. 但是,如果我单击“
Update Prop1
按钮,则prop1
值将被更新,但更改不会反映在视图中。 I am not sure exactly what I am missing. 我不确定我到底缺少什么。
Note: Instead of using $parent.testObj['prop1']
, if $parent.testObj.prop1
is used, the databinding works as it should. 注意:不要使用
$parent.testObj['prop1']
如果$parent.testObj.prop1
使用,数据绑定工作,因为它应该。 However, my actual custom-element is of generic kind and the property name is not known before hand, hence it seems that I need to keep using $parent.testObj['prop1']
notation instead of dot notation: $parent.testObj.prop1
. 但是,我的实际自定义元素是通用类型,属性名称事先未知,因此,似乎需要继续使用
$parent.testObj['prop1']
表示法代替点表示法: $parent.testObj.prop1
。
At pointer/suggestion/feedback is appreciated. 在指针/建议/反馈表示赞赏。
Update: If anyone can point out the the difference between the dot notation and indexer notation wrt aurelia data-binding (I have checked this already), that will be of great help. 更新:如果任何人都可以点出点符号和符号索引WRT Aurelia大街之间的差值数据绑定 (我已经检查这个的话),那将是很大的帮助。
This was an issue in earlier builds of the aurelia/binding
module. 这是
aurelia/binding
模块的早期版本中的一个问题。 Here's the related issue(s): 以下是相关问题:
I tried your view/view-model in the latest version of aurelia and everything worked. 我在最新版本的aurelia中尝试了您的视图/视图模型,并且一切正常。 Here's a screencast of what I saw: http://screencast.com/t/KqcuqXWjkU2
这是我所见的屏幕录像: http : //screencast.com/t/KqcuqXWjkU2
Make sure you have the latest version of the aurelia components installed- update steps here: http://blog.durandal.io/2015/05/01/aurelia-may-status-and-releases/ 确保您已安装最新版本的aurelia组件-此处更新步骤: http : //blog.durandal.io/2015/05/01/aurelia-may-status-and-releases/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.