[英]what is the best way to enable and disable save button in Aurelia with complex domain object?
I have editMessage.js constructor as: 我有editMessage.js构造函数:
constructor(){
var messageStringProperty1 = new messageStringProperty();
messageStringProperty1.propertyName = 'title';
messageStringProperty1.propertyValue = 'This is the menu for school campus';
this.messageProperties[0] = messageStringProperty1;
var messageIntegerProperty1 = new messageIntegerProperty();
messageIntegerProperty1.propertyName = 'Menu Title Font Size';
messageIntegerProperty1.selectedValue = 30;
messageIntegerProperty1.selectableValues = [10, 12, 14, 30]
this.messageProperties[1] = messageIntegerProperty1;
var messageImageProperty1 = new messageImageProperty();
messageImageProperty1.propertyName = 'Background Image';
messageImageProperty1.elementName = 'BackgroundImage';
messageImageProperty1.originalImage = "http://i2.wp.com/ejohn.org/files/Timers.png";
this.messageProperties[2] = messageImageProperty1;
var messageColorProperty1 = new messageColorProperty();
messageColorProperty1.propertyName = 'Title Color';
messageColorProperty1.propertyValue = '#ffffff';
messageColorProperty1.elementName = 'TitleColor';
this.messageProperties[3] = messageColorProperty1;
}
and editMessage.html (view) is: 和editMessage.html(视图)是:
<li class="list-group-item" repeat.for="p of messageProperties">
<div if.bind="p.propertyType == 'string'">
<div class="form-group">
<label for="ln1">Name: ${p.propertyName}</label>
<input type="text" value.bind="p.propertyValue" class="form-control" id="ln1" >
</div>
</div>
<div if.bind="p.propertyType == 'integer'">
<div class="form-group">
<label for="ln2">Name: ${p.propertyName}</label>
<input type="text" value.bind="p.selectedValue" class="form-control" id="ln2" >
<select-picker selectable-values.bind="p.selectableValues" selected-value.two-way="p.selectedValue"></select-picker>
</div>
</div>
<div if.bind="p.propertyType == 'image'">
<div class="form-group, message-border">
<div class="message-property-name">
Name: ${p.propertyName}
<input type="text" value.bind="p.propertyValue" id="ln3" >
</div>
<image-picker selected-file.two-way="p.selectedFile" original-image.two-way="p.originalImage" element-name.bind="p.elementName"></image-picker>
</div>
</div>
<div if.bind="p.propertyType == 'color'">
<div class="form-group">
<label for="ln3">Name: ${p.propertyName}</label>
<input type="text" value.bind="p.propertyValue" class="form-control" id="ln3" >
<color-picker element-name.bind="p.elementName" initial-color.bind="p.propertyValue"></color-picker>
</div>
</div>
</li>
I would like to have a save button so that if any of my message*property objects change it enables otherwise it stays disabled. 我想有一个保存按钮,以便如果我的任何消息*属性对象更改它启用,否则它将保持禁用状态。
In the past I have created a timer and done some dirty checking by comparing original values with the changed values. 在过去,我创建了一个计时器,并通过将原始值与更改的值进行比较来完成一些脏检查。 What is the best approach with Aurelia to do this?
Aurelia做这件事的最佳方法是什么?
Thanks to zewa66, I copied the same methodology as github.com/aurelia/app-contacts . 感谢zewa66,我复制了与github.com/aurelia/app-contacts相同的方法。 What I did was on each business object message*Property I created a hasPropertyChanged method.
我做的是每个业务对象消息*属性我创建了一个hasPropertyChanged方法。
For example on messageStringProperty I have: 例如,在messageStringProperty上我有:
get propertyHasChanged(){
return this.originalValue != this.propertyValue;
}
Then on the main view I have: 然后在主视图上我有:
get canSave(){
for (var i=0; i< this.messageProperties.length; i++){
if (this.messageProperties[i].propertyHasChanged){
return true;
}
}
return false;
}
and on the view we have: 在我们的观点上:
<button class="btn btn-success" click.trigger="saveChanges()"
disabled.bind="!canSave">Save Changes</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.