【问题标题】:Can't access inputs wrapped by component [duplicate]无法访问由组件包装的输入[重复]
【发布时间】:2026-02-18 15:10:01
【问题描述】:

我有一个模态组件作为组件,组件内部有一些输入。需要访问这些输入的操作在我的组件中定义,但根本无法访问它们..

有什么想法吗?

admin-modal.hbs:

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{title}}</h4>
            </div>
            <div class="modal-body">
              {{yield}}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">{{btnCancel}}</button>
              <button {{action "submit" inputTitle}} type="button" class="btn btn-primary">{{btnSave}}</button>
            </div>
        </div>
    </div>

index.hbs:

    {{#admin-modal id="modNewCat" title="Kategorie hinzufügen" submit="newCat"}}
      <form>
        <div class="form-group">
          {{input type="text" class="form-control" id="form.inputTitle" value=inputTitle placeholder="Kategorie Name"}}
        </div>
        <div class="form-group">
          <textarea type="text" class="form-control" id="inputDesc" name="inputDesc" placeholder="Kategorie Beschreibung"></textarea>
        </div>
        <div class="form-group">
          <div class="input-group cp">
              {{input type="text" value="" class="form-control" id="inputColor" value="form.inputColor" placeholder="Kategorie Farbe" }}
              <span class="input-group-addon"><i></i></span>
          </div>
        </div>
      </form>
    {{/admin-modal}}

【问题讨论】:

  • 不幸的是,正如我发布的链接中所见,这两个上下文无法直接交互。您必须从输入向上发送一个操作,然后将数据向下传递给组件。这似乎很迂回,但这是一种很好的做法(和设计)。

标签: javascript ember.js handlebars.js


【解决方案1】:

这应该可以解决问题,您只需要绑定值,因为组件是隔离的:

{{#admin-modal inputTitle=inputTitle id="modNewCat" title="Kategorie hinzufügen" submit="newCat"}}

【讨论】:

  • 但仍然无法从我的组件中被包围的表单访问它..
  • 但是 action: {{action "submit" inputTitle}} 现在可以工作了,对吧?我已经在 Ember 1.11 上对此进行了测试,并成功通过了此属性...
  • 是的,但只要我使用公共名称,它就可以工作..