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

Question

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

下面是待办事项的图片

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

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

下面的代码是我试过的。

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

todo.hbs

<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');
   }
 },
})

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

Answer 1

更好的方法是每个待办事项都有一个组件，其中每个组件都有一个独立的内部状态 (is_editing)。

真正答案之前的一些提示：
.提供有关您的版本的更多信息（尤其是ember）。
. "isDone" 类名应该是 'is-done'.
.如果您不使用参数，请不要传递它们（editTodo 操作）

我没有测试这段代码，但思路是：

todo.hbs

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

templates/components/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}}

components/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()
      ;
    },

  },

});

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

How to Edit a todo task on same component in Ember

javascript

ember.js

ecmascript-6

ember-data

emberfire