Как бы изменить цвет фона элемента списка при нажатии?(ES6 и Полимер) - PullRequest
Новая
       45

Как бы изменить цвет фона элемента списка при нажатии?(ES6 и Полимер)

0 голосов
/ 02 декабря 2018

Я клонировал репозиторий, который фокусируется на создании приложения To-Do с использованием ES6 и Polymer 3. Я пытаюсь реализовать кнопку, которая при щелчке поворачивает цвет фона, содержащий строку, зеленым.Я пытался сделать это, но не получаю желаемого результата.

Пример кода: 

 static get properties() {
    return {
      list: {type: Array},
      todo: {type: String},
    };
  }
  constructor() {
    super();
    this.list = [
      this.todoItem('buy cereal'),
      this.todoItem('buy milk')
    ];
    this.todo = '';
    this.createNewToDoItem = this.createNewToDoItem.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  todoItem(todo) {
    return {todo}
  }

  createNewToDoItem() {
    this.list = [
      ...this.list,
      this.todoItem(this.todo)
    ];
    this.todo = '';
  }

  //Right here is where I tried to implement the background color change.
  checkItem() {
    checkItem = document.getElementById('checkItem'),
    checkItem.addEventListener('click', () => {
      this.list = this.list.filter(this.todo)
      document.body.style.backgroundColor = 'green';
    });
  }

  deleteItem(indexToDelete) {
    this.list = this.list.filter((toDo, index) => index !== indexToDelete);
  }

  render() {
    return html`
    ${style}
    <div class="ToDo">
      <h1>Grocery List</h1>
      <h1 class="ToDo-Header">What do I need to buy today?</h1>
      <div class="ToDo-Container">

        <div class="ToDo-Content">

          ${repeat(
            this.list,
            (item, key) => {
              return html`
                <to-do-item
                  item=${item.todo}
                  .deleteItem=${this.deleteItem.bind(this, key)}
                ></to-do-item>
              `;
            }
          )}
        </div>

Я был бы вечно благодарен, если бы кто-нибудь помог мне.Я создал две ссылки JSFiddle, которые показывают код, над которым я работал до сих пор:

Ссылка 1: https://jsfiddle.net/r2mxzp1c/ (строка проверки 42-49)

Ссылка 2:https://jsfiddle.net/zt0x5u94/ (проверьте строки 13 и 22-24)

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вы должны попытаться заставить реактивные шаблоны работать на вас, определяя детали представления в терминах свойств вашего элемента.

Например, это упрощенный подход к той же проблеме: 

class TestElement extends LitElement{
  static get properties() {
    return {
      'items':  { 'type': Array }
    };
  }

  constructor() {
    super();
    // set up a data structure I can use to selectively color items
    this.items = [ 'a', 'b', 'c' ].map((name) =>
      ({ name, 'highlight': false }));
  }

  render() {
    return html`<ol>${
      this.items.map((item, idx) =>
        html`<li
          @click="${ () => this.toggle(idx) }"
          style="background: ${ item.highlight ? '#0f0' : '#fff' }">
            ${ item.name }
        </li>`) 
    }</ol>`;
  }

  toggle(idx) {
    // rendering won't trigger unless you replace the whole array or object
    // when using properties of those types. alternatively, mutate with the
    // usual .push(), .splice(), etc methods and then call `this.requestUpdate()`
    this.items = this.items.map((item, jdx) =>
      jdx === idx ? { ...item, 'highlight': !item.highlight } : item
    );
  }
}

https://jsfiddle.net/rzhofu81/305/

Я определяю шаблон таким образом, чтобы элементы были окрашены так, как я хочу, в зависимости от аспекта их состояния (атрибут «highlight» каждой записи в списке), изатем я фокусирую взаимодействие на обновлении состояния, чтобы отразить то, что делает пользователь.

0 голосов
/ 07 декабря 2018

Я не уверен в подходе.Но эта ссылка может помочь вам https://stackblitz.com/edit/web-components-zero-to-hero-part-one?file=to-do-app.js

от этого парня: https://stackblitz.com/@thepassle

...