javascript - 将不同的数据发送到 Ember 中的嵌入式组件

Question

目前，我在两个 View 中进行了拖放设置。我正在尝试将它们拉出来并从中制作可重复使用的组件。此时，我什至不担心这些操作并将该信息带回来(这将是我要研究的下一个问题)。现在我只担心如何显示正确的数据。

我当前设置的模板是:

外部 ListView :

<ul class="sortable-list">
  {{#each view.permission}}
    {{ view App.GroupsPermissionView }}
  {{/each}}
</ul>

单个项目 View :

<li class="sortable-item">{{ this.displayName }}</li>

我已将其更改为以下组件模板:

拖放.handlebars:

<ul class="sortable-list">
  {{#each dad}}
    {{ drag-and-drop-item dadi=this.displayName }}
  {{/each}}
</ul>

和拖放item.handlebars:

<li class="sortable-item">{{ dadi }}</li>

我用 {{ Drag-and-drop badd=unselectedPermissions }} 或 {{ Drag-and-drop bad=selectedPermissions }}

来调用它

这工作得很好。

这是我的问题。我对拖放的其他使用不使用“displayName”字段名称。该字段只是“名称”。我确信其他同事也需要使用其他字段名称。

我尝试了很多不同的方法来尝试将其传递到内部组件，但没有任何效果。我认为这是 Handlebars 的限制，这是不可能做到的。

知道在这里可以做什么吗？

编辑:更新

我已经把事情弄得更近了......但现在我遇到了另一个相关问题。这是我当前的拖放 handle :

<ul class="sortable-list">
  {{#each dad}}
    {{ drag-and-drop-item self=this dadi=../field }}
  {{/each}}
</ul>

这是拖放项目.handlebars:

<li class="sortable-item">{{ dragAndDrop self dadi }}</li>

这里是drag_and_drop_helpers.js:

Ember.Handlebars.helper("dragAndDrop", function(context,value) {
  return this.self.get(value);
});

我意识到上面没有使用上下文，因为我正在进行测试，所以我已经将它放在那里了。

这就是事情......通过上面的代码，我得到了正确的“this”。如果我返回“this.self.get('displayName');”在助手中，它有效。但是，模板中不会返回 ../field。我真希望你可以嵌套 {{}}...这样就可以了!

为了让 ../field 工作，我发现我可以对拖放.handlebars 进行以下更改:

<ul class="sortable-list">
  {{#each dad}}
    {{#if ../field}}
      {{ drag-and-drop-item self=this dadi=../field }}
    {{/if}}
  {{/each}}
</ul>

但是如果我这样做，“this”不是正确的，所以我会得到“displayName”，但上下文是错误的。

看来我可以选择其中一个，或者选择另一个，但不能两者兼而有之。

我真的需要一些帮助。

Answer 1

经过几天的搜索和尝试很多事情后，我弄清楚了。

我没有意识到你可以使用“ View ”。提取信息。

这是对此的调用:

{{ drag-and-drop dad=unselectedPermissions field="displayName" }}

这是工作的拖放 handle :

<ul class="sortable-list">
  {{#each dad}}
    {{ drag-and-drop-item self=this dadi=view.field }}
  {{/each}}
</ul>

这是工作的拖放项目.handlebars:

<li class="sortable-item">{{ dragAndDrop dadi }}</li>

这是工作的drag_and_drop_helpers.js:

Ember.Handlebars.helper("dragAndDrop", function(value) {
  return this.self.get(value);
});

我希望这对将来的人有所帮助，这样他们就不会重复我所犯的错误。

现在，开始弄清楚 component.js 的编码...