Aurelia bindet ein Objekt in einem benutzerdefinierten Element

Question

Ich habe ein Objekt 'visit', das mehrere Eigenschaften hat (z. B. visit1 = {id: 1, clientId: "0001", startTime: 1234567890, finishTime: 1234567899}). Die Besuche werden im Array 'shifts' gespeichert, das aussieht wie shifts = [{id: 1, visits: [visit1, ...]}, ...].

Um die Daten in der Ansicht angezeigt werden, verwende ich 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> 

‚besucht Punkt‘ ein benutzerdefiniertes Element ist die editierbare Form für einen einzigen Besuch anzuzeigen. Sein Blick ist:

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

Der Blick-Modell des Besuches-Artikel:

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"); 
    } 
} 

ich versuchen, Änderungen in der Form eines Besuchs von visitChanged() -Methode zu fangen, aber besuchen Punkt des view- Modell ruft diese Methode nicht auf, wenn ich Werte im Formular ändere. Das selbe, wenn ich valueChanged() mache. Gibt es eine Möglichkeit, Änderungen im Formular mit dem beschriebenen Datenentwurf zu erfassen?

Answer 1

Das Problem ist, dass die visit ändert sich nicht, es sind die Eigenschaften auf visit, die sich ändern. Da Sie nur eine kleine Anzahl von Eigenschaften haben, an die Sie gebunden sind, sollten Sie am besten eine bindbare Eigenschaft unter visit-item für jede Eigenschaft erstellen, die Sie benötigen, um über Änderungen informiert zu werden.

Answer 2

Es ist mir gelungen, Änderungen zu erfassen, wenn ich alle im Formular angezeigten Eigenschaften als separate gebundene Variablen in das benutzerdefinierte Element einbeziehe. Es sieht schlecht aus, da ich viele Eigenschaften für einen Besuch habe. Wenn Sie zufällig eine bessere Lösung kennen, lassen Sie es mich wissen

Answer 3

Sehr gut @Ashley Grant.

Ich fand eine Auflösung, wenn Sie eine oder einige Eigenschaften eines komplexen Objekts beobachten möchten. Sag mir, was du davon hältst.

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}`); 
    } 
}