Question

我有一个具有多个属性的对象'visit'（例如visit1 = {id：1，clientId：“0001”，startTime：1234567890，finishTime：1234567899}）。访问次数存储在数组“轮班”中，看起来像班次= [{id：1，访问次数：[visit1，...]}，...]。

要在视图中显示数据，请使用repeat.for：

<div repeat.for="shift of shifts">
  <ul>
    <li repeat.for="visit of shift.visits">
      <visit-item visit.bind="visit" settings.bind="userSettings" selectors="selectors"></visit-item>
    </li>
</ul>
</div>

'visit-item'是一个自定义元素，显示单次访问的可编辑表单。它的观点是：

<template>
<require from="./timepicker"></require>
<require from="../../converters/hour-format"></require>
<form class="form-horizontal" role="form">
    <div class="col-xs-12 col-md-3 col-lg-3">
        <label>start</label><input timepicker class="form-control input-sm" id="startTime_${visit.id}" type="text" value.bind="visit.startTime | hourFormat">
      </div>
      <div class="col-xs-12 col-md-3 col-lg-3">
        <label>finish</label><input timepicker class="form-control input-sm" id="finishTime_${visit.id}" type="text" value.bind="visit.finishTime | hourFormat">
      </div>
      <div class="col-xs-12 col-md-3 col-lg-3">
        <label>client</label><select class="form-control input-sm" id="client_${visit.id}" value.bind="visit.clientId">
          <option repeat.for="option of selectors.client" model.bind="option.value" disabled.bind="option.disabled">${option.name}</option>
        </select>
      </div>
    </form>
</template>

访问项目的视图模型：

import {bindable, bindingMode} from 'aurelia-framework';
export class VisitItemCustomElement {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) visit;
  @bindable selectors;
  constructor()  {
  }
  bind()  {
  }
  visitChanged(newValue, oldValue)  {
    console.log("visit changed");
  }
}

我尝试通过visitChanged（）方法捕获访问形式的更改，但是当我更改表单中的值时，visit-item的view-model不会调用此方法。如果我执行valueChanged（），则相同。有没有办法通过描述的数据设计来捕捉表单中的更改？

Answer 1

问题是def inputFile = new File('filename.txt') if (inputFile.exists()) { inputFile.eachLine { line -> if(line.contains('amazonaws.com')) { //or use regex def result = line.split('.')[0] //do something with result } } }没有变化，visit上的属性正在发生变化。由于您只绑定了少量属性，因此最好通过在visit上为每个需要通知更改通知的属性创建可绑定属性。

Answer 2

非常好@Ashley Grant。

当你想要观察复杂物体的一个或一些属性时，我发现了一个灵魂。告诉我你的想法。

import {bindable, bindingMode, BindingEngine} from 'aurelia-framework';
@inject(BindingEngine)
export class VisitItemCustomElement {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) visit;
  constructor(bindingEngine) {
   this.bindingEngine = bindingEngine;
  }
  bind() { 
   this.subscription = this.bindingEngine
    .propertyObserver(this.visit, 'clientId') //e.g. subscribe to visit.clientId
    .subscribe(this.objectValueChanged); //subscribe to prop change
  }
  unbind() {
   this.subscription.dispose(); //otherwise you'll bind twice next time
  }
  visitChanged(newValue, oldValue)  {
    console.log(`visit changed from: ${oldValue} to:${newValue}`);
    if (this.subscription) {
      this.subscription.dispose();
    }
    this.subscription = this.bindingEngine
    .propertyObserver(this.visit, 'clientId')
    .subscribe(this.objectValueChanged); // subscribe again in case obj changes!
  };
  }
  objectValueChanged(newValue, oldValue) {
    console.log(`objectValue changed from: ${oldValue} to:${newValue}`);
  }
}

Answer 3

当我将表单中显示的所有属性包含在自定义元素中的单独绑定变量时，我设法捕获更改。它看起来很糟糕，因为我有很多访问属性。如果您碰巧知道更好的解决方案，请告诉我

Aurelia绑定自定义元素中的对象

3 个答案: