在Ember中向嵌入式组件发送不同的数据

Question

我目前在两个视图中进行了拖放设置。我试图将它们拉出来并从中制作可重用的组件。在这一点上，我甚至不担心这些行动并将这些信息带回来（这将是我将要研究的下一个问题）。现在我只担心要显示正确的数据。

我当前设置的模板是：

外部列表视图：

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

单个项目视图：

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

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

拖和drop.handlebars：

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

和drag-and-drop-item.handlebars：

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

我用{{ drag-and-drop dad=unselectedPermissions }}或{{ drag-and-drop dad=selectedPermissions }}

打电话

这很好。

这是我的问题。我对拖放的另一种使用不使用＆＃34; displayName＆＃34;的字段名称。该字段只是＆＃34; name＆＃34;。我确信其他同事也需要使用其他字段名称。

我尝试了很多不同的东西来尝试将它传递给内部组件，但没有任何效果。我认为这是车把的限制，这是不可能的。

如果有的话，可以在这里做些什么？

修改：更新

我有点接近......但现在我遇到了另一个相关的问题。这是我目前的拖放操作：

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

这里是拖放项目。把手：

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

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

在这里......根据上面的代码，我得到了正确的＆＃39;这个＆＃39;。如果我返回＆＃34; this.self.get（＆＃39; displayName＆＃39;）;＆＃34;在帮助器中，它的工作原理。但是，.. / field不会在模板中返回。我希望你能嵌套{{}}＆＃39;然后这会有效！

为了让../field正常工作，我发现我可以对drag-and-drop.handlebars进行以下更改：

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

但如果我这样做，＆＃39;这个＆＃39;不是正确的，所以我得到了'displayName＆＃39;通过，但错误的背景。

似乎我可以拥有一个或另一个，但不能两者都有。

我真的可以在这里使用一些帮助。

Answer 1

经过几天的搜索和尝试很多事情，我弄明白了。

我没有意识到你可以使用＆＃34;查看。＆＃34;提取信息。

这是对此的呼吁：

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

这是工作拖放。把手：

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

这是工作拖放项目。把手：

<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的编码......