1

我克隆了一个存储库，该存储库专注于使用 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 行）

4

2 回答 2

1

我不确定这种方法。但是此链接可能会对您有所帮助 https://stackblitz.com/edit/web-components-zero-to-hero-part-one?file=to-do-app.js

来自这个人：https ://stackblitz.com/@thepassle

于 2018-12-06T22:17:38.233 回答
0

您应该尝试通过根据元素的属性定义表示细节来使反应式模板为您工作。

例如，这是解决同一问题的精简方法：

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/

我定义模板，使元素根据状态的某个方面（列表中每个条目的“突出显示”属性）以我想要的方式着色，然后我将交互重点放在更新状态以反映用户的内容是在做。

于 2018-12-13T05:15:37.643 回答