ändern Handler für eine Eigenschaft ohne Namen

Question

Betrachten Sie die folgende Liste:

fields.html

<div repeat.for="f of fields"> 
    ${f.name}: <input value.bind="f.value"> 
</div> 

fields.js

class Fields 
{ 
    fields = [{ 
     name: "First name", 
     value: "Jack" 
    }, { 
     name: "Surname", 
     value: "Giant slayer" 
    }]; 
} 

Ich möchte die Liste speichern sobald es geändert wird (vielleicht nach ein paar Sekunden, wie Gas geben). Wie kann ich einen Handler in die Klasse Fields einfügen, der aufgerufen wird, sobald eine der Textboxen geändert wird? Und ich spreche nicht über die blur Event-Handler.

Answer 1

Speichern, wenn das Ereignis DOM input ausgelöst wird. Verwenden Sie das Bindungsverhalten debounce, um die Speichervorgänge zu begrenzen.

Hier ein Beispiel: https://gist.run?id=26ea2f5e3a2c35ecd96ff9aa579a893f

app.html

<template> 
    <form input.delegate="save() & debounce:500"> 
    <label repeat.for="f of fields"> 
     ${f.name}: <input value.bind="f.value"> 
    </label> 
    </form> 

    <pre><code>${log}</code></pre> 
</template> 

app.js

export class App { 
    fields = [ 
    { name: "First name", value: "Jack" }, 
    { name: "Surname", value: "Giant slayer" } 
    ]; 

    log = ''; 

    save() { 
    this.log += `Saved: ${JSON.stringify(this.fields)}\n`; 
    } 
}