在 Ember 引导程序中单击复选框时如何显示折叠？答案

【问题标题】：How to display collapse when checkbox clicked in Ember bootstrap?在 Ember 引导程序中单击复选框时如何显示折叠？
【发布时间】：2017-06-23 16:51:55
【问题描述】：

我对 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，则单击复选框时不会显示字段，但我仍然收到错误消息。尝试解决此问题的最佳方法是什么？

【问题讨论】：

标签： javascript html twitter-bootstrap ember.js

【解决方案1】：

您面临的错误与{{bs-collapse}} 或您的{{bs-button}} onClick 操作无关。似乎您的{{bs-form}} 没有model 属性，但ember-bootstrap 需要该属性，如果您没有对每个onChange 执行onChange 操作@。您可以在 ember-bootstrap api docs 和 source code 中找到详细信息。

【讨论】：