javascript - 如何在Ember中的同一组件上编辑待办事项任务

我想在相同的列表样式标签上编辑待办事项任务，而不影响当前的其他待办事项。

下面是待办事项的图片


下面的第二张图片是单击编辑按钮时。


我想要实现的是在特定的待办事项上单击编辑按钮时，我希望在文本字段中出现带有数据的输入字段，而待办事项本身消失。我希望它发生在一个特定的待办事项上，而不会影响到所有人。

下面的代码是我尝试过的。

这段代码告诉它是否处于编辑模式，它应该显示文本输入字段，而esle显示待办事项

待办事项

<ul class="list-group">
        {{#each model as |todo|}}
          <li class="list-group-item {{if todo.done " isDone"}}">
            {{#if isEdit}}
              <div class="text-input">
                {{input type="text" name="todo" value=todo}}
                <span class="text-info right edit" {{action "cancelEdit" todo}}><i class="far fa-edit"></i></span>
              </div>
            {{else}}
              <span class="round">
                {{input type="checkbox" checked=todo.done click=(action 'toggleTodo' todo)}}
                <label for="checkbox"></label>
              </span>
              <span>
                {{todo.content}} - <span class="date {{if todo.done " isDone"}}">{{todo.createdAt}}</span>
              </span>
              <span class="text-danger right delete" {{action "deleteTodo" todo }}><i class="far fa-trash-alt"></i></span>
              <span class="text-info right edit" {{action 'editTodo'}}><i class="far fa-edit"></i></span>
            {{/if}}
          </li>
        {{/each}}
      </ul>

todo.js

export default Controller.extend({
  isEdit: false,
  actions: {
   editTodo: function(todo) {
     this.toggleProperty('isEdit');
   },
   cancelEdit: function () {
     this.toggleProperty('isEdit');
   }
 },
})

在不影响其他待办事项的情况下该如何做我想做的事情？

最佳答案

更好的方法是为每个待办事项都拥有一个组件，其中每个组件将具有独立的内部状态（is_editing）。

真正答案之前的一些技巧：
。提供有关您的版本（尤其是琥珀色）的更多信息。
。 “ isDone” className应该为“ is-done”。
。如果不使用参数，请勿传递参数（editTodo操作）

我没有测试此代码，但是这里的想法是：

待办事项

<ul class="list-group">
    {{#each model as |todo|}}
        {{to-do model=todo}}
    {{/each}}
</ul>

模板/组件/todo-list-elem.hbs

{{#if is_editing}}
  <div class="text-input">
    {{input type="text" name="todo" value=model.content}}
    <span class="text-info right edit" {{action "cancelEdit" todo}}>
      <i class="far fa-edit"></i>
    </span>
  </div>
{{else}}
  <span class="round">
    {{input type="checkbox" checked=todo.done click=(action 'toggleTodo')}}
    <label for="checkbox"></label>
  </span>
  <span>
    {{todo.content}} - <span class="date {{if todo.done " isDone"}}">{{todo.createdAt}}</span>
  </span>
  <span class="text-danger right delete" {{action "deleteTodo" todo }}>
    <i class="far fa-trash-alt"></i>
  </span>
  <span class="text-info right edit" {{action 'editTodo'}}>
    <i class="far fa-edit"></i>
  </span>
{{/if}}

组件/todo-list-elem.js

import Ember from 'ember';
const { computed: { alias } } = Ember;

export default Ember.Component.extend({
  tagName: 'li',
  classNames:['list-group-item'],
  classNameBindings: ['isDone'], // your class will be is-done id todo.done === true

  isDone: alias('model.done'),

  is_editing: false,

  actions: {

    editTodo() {
      this.set('is_editing', true);
    },

    cancelEdit() {
      this.set('is_editing', false);
    },

    toggleTodo() {
      this.toggleProperty('model.done');
    },

    deleteTodo() {
      this.get('model')
          .destroyRecord()
      ;
    },

  },

});

关于javascript - 如何在Ember中的同一组件上编辑待办事项任务，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49258185/