Question

我是Ember的新手，当我点击一个复选框作为表单的一部分时，我正在尝试实现Collapse方法。此复选框位于我表单中的按钮组的折叠部分内。

Template.hbs

      {{#bs-button onClick=(action "toggle")}}
        {{#if collapsed}}
          {{form.element controlType="checkbox" label="View Additional Fields" property="additionalFields"}}
        {{/if}}
        <div>
          {{#bs-collapse collapsed=collapsed}}
            {{form.element controlType="checkbox" label="Property" property="property"}}
            {{form.element controlType="textarea" label="Instructions:" name="instructions" property="instructions"}}
          {{/bs-collapse}}
        </div>
      {{/bs-button}}

Component.js

collapsed: true,
actions: {
toggle() {
  let toggleValue = !get(this, 'collapsed');
  set(this, 'collapsed', toggleValue);
  }
}

当运行ember serve时，如果单击复选框，我会转到我的表单，Ember Inspector中会弹出一个错误：

断言失败：如果不使用模型或直接在表单元素上设置值，则不能对表单元素使用表单元素的默认onChange操作。在这种情况下，您必须将自己的onChange操作添加到表单元素！错误

如果我将onClick更改为onChange，则单击复选框时不会显示字段，但我仍然收到错误。试图解决这个问题的最佳方法是什么？

Answer 1

您遇到的错误与{{bs-collapse}}或您的{{bs-button}} onClick操作无关。您的{{bs-form}}似乎没有model属性，但ember-bootstrap似乎要求对onChange {{form.element}}行动{{1}} 。您可以在ember-bootstrap api docs和source code中找到详细信息。

如何在Ember bootstrap中单击复选框时显示折叠？

1 个答案: