aurelia - 在具有复杂域对象的Aurelia中启用和禁用保存按钮的最佳方法是什么？

我有 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;

}

而editMessage.html( View )是:

<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>

我想要一个保存按钮，这样如果我的任何 message*property 对象发生变化，它就会启用，否则它会保持禁用状态。

过去我创建了一个计时器并通过将原始值与更改后的值进行比较来进行一些脏检查。使用Aurelia的最佳方法是什么？

最佳答案

感谢 zewa66，我复制了与 github.com/aurelia/app-contacts 相同的方法。我所做的是在每个业务对象 message*Property 上创建了一个 hasPropertyChanged 方法。

例如在 messageStringProperty 我有:

get propertyHasChanged(){
  return this.originalValue != this.propertyValue;
}

然后在主 View 上我有:

 get canSave(){
   for (var i=0; i< this.messageProperties.length; i++){
     if (this.messageProperties[i].propertyHasChanged){
      return true;
    }
  }

  return false;
}

我们认为:

 <button class="btn btn-success" click.trigger="saveChanges()"
                          disabled.bind="!canSave">Save Changes</button>

关于aurelia - 在具有复杂域对象的Aurelia中启用和禁用保存按钮的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30038637/