Блог

Главная - Вопросы по программированию - Обработчик изменений для свойства без имени

Обработчик изменений для свойства без имени

#javascript #aurelia

#javascript #aurelia

Вопрос:

Рассмотрим следующий список:

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

Я хочу сохранить список после его изменения (возможно, через несколько секунд, например, через дроссель). Как я могу ввести обработчик в Fields класс, который будет вызываться после изменения одного из текстовых полей? И я не говорю об обработчике blur событий.

Ответ №1:

Сохраняется при input запуске события DOM. Используйте debounce поведение привязки для ограничения скорости сохранения.

Вот пример: https://gist.run?id=26ea2f5e3a2c35ecd96ff9aa579a893f

app.html

 <template>
  <form input.delegate="save() amp; 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`;
  }
}

Комментарии:

1. Спасибо, это именно то, что я хочу. Как я тестировал, это не обязательно должен быть form тег, и подойдет любой тег, верно? В вашей сути тег формы работает отлично. Но в моем коде, как только я ввожу тег формы, возникает следующая ошибка: ERROR [app-router] RangeError: Maximum call stack size exceeded . Не то чтобы я спрашивал, как это исправить, но если вы считаете, что я должен сообщить об этом где-нибудь, пожалуйста, дайте мне знать.

2. Правильно — не обязательно должен быть тегом формы. Я использовал форму и метку только по семантическим соображениям