Переплетные элементы массива в виде

Question

Я новичок в каркасе aurelia. Я пытаюсь создать список текстовых входов с встроенным редактированием. Каждый вход должен быть отключен по умолчанию, и после нажатия кнопки редактирования он должен иметь возможность редактировать, удалив атрибут disbaled.

Мои welcome.js:

import {inject} from 'aurelia-framework'; 

@inject(HttpClient) 
export class Welcome { 
    heading = 'Welcome'; 

    inputs_list = [ 
     { 
      'id': 1, 
      'text': 'example one', 
      'edit': false 
     }, 
     { 
      'id': 2, 
      'text': 'example two', 
      'edit': false 
     }, 
    ]; 

    editInput(evt){ 
     let input = this.inputs_list.find(input => input.id === id); 
     input.edit = true; 
    } 

} 

мой взгляд файл welcome.html:

<template> 
    ${heading} 
    <ul> 
     <li repeat.for="input of inputs_list"> 
      <input ${input.edit ? '' : 'disabled'} type="text" value="${input.text}" class="inputs"/> 
      <input type="button" click.delegate="editInput(input.id)" value="edit" /> 
     </li> 
    </ul> 
</template> 

И я получаю предупреждаю:

WARN [templating-binding] Unknown binding command. Object {defaultBindingMode: null, attrName: "${input", attrValue: "", command: "edit", expression: null} 

Я уже нашел решение путем модификации метода editInput и передачи $event в качестве параметра:

editInput(evt){ 
    let inputs = evt.target.parentNode.getElementsByClassName('inputs'); 
    Array.from(inputs).forEach(input => input.removeAttribute('disabled')); 

} 

Это работает, но я хотел бы знать, что является правильным способом достижения этого?

Answer 1

Aurelia запутывается b/c нет никаких атрибутов на input элементов под названием ${input.edit ? '' : 'disabled'}. Для привязки к отключенному атрибуту необходимо использовать команду привязки.

Это может помочь вам ознакомиться с некоторыми начинающими руководствами по работе с механизмом привязки Aurelia. Например, value="${input.text}", вероятно, не делает того, что вы хотите. Чтобы свойство input.text было привязано к значению этого текстового поля, вам необходимо использовать value.bind="input.text".

Кроме того, в обработчике click вы можете просто передать элемент из массива вместо передачи его идентификатора. click.delegate="editInput(input)", а затем установите для свойства input.edit значение true в функции editInput. В качестве альтернативы вы можете просто сделать это встроенным в своем представлении, как я показал ниже.

И, наконец, inputs_list не соответствует стандартным соглашениям об именовании JavaScript. Вы можете рассмотреть вопрос о переходе на inputsList или inputList как я показал ниже:

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

app.html

<template> 
    ${heading} 
    <ul> 
     <li repeat.for="input of inputList"> 
      <input disabled.bind="!input.edit" type="text" value.bind="input.text" class="inputs"/> 
      <input type="button" click.delegate="input.edit = true" value="edit" /> 
     </li> 
    </ul> 
</template> 

app.js

import {inject} from 'aurelia-framework'; 

export class Welcome { 
    heading = 'Welcome'; 

    inputList = [ 
     { 
      'id': 1, 
      'text': 'example one', 
      'edit': false 
     }, 
     { 
      'id': 2, 
      'text': 'example two', 
      'edit': false 
     }, 
    ]; 

} 

Answer 2

Вы можете привязать значение непосредственно атрибута, как это:

<input disabled.bind="input.edit" type="text" value="${input.text}" class="inputs"/> 

Таким образом, вам не придется возиться с DOM опрашивает или повозиться с атрибутами непосредственно

проверить эту статью для больше information