如何创建一个Ember JS主细节，其中的细节显示在数据行之间

How to create an Ember JS Master Detail where detail appears between rows of data

本文关键字：细节 显示 数据 之间 JS 创建 何创建 Ember 一个      更新时间：2023-09-26

我试图创建一个包含主/详细信息的页面，这显然很容易在ember中使用静态{{outlet}}，但是，我希望详细信息在选定的行之后向下滑动。例如，在此页面:http://jsbin.com/ijejap/1/edit上，如果名称的详细信息出现在当前选择的名称之后，而不是在页面底部。

我要解决的问题是，我不能在中继器中有一个出口，所以当我单击第1行时，我希望出口位于第1行下方，当我单击第2行时，我希望出口位于第2行之后。换句话说，我想动态定位输出，除非有其他方法

好了，我最终创建了一个条件输出，这取决于用户是否被选中，但我必须与DS.Model及其FIXTURES一起工作才能使其工作。

简而言之，我在链接之前添加了一个操作，用于在用户对象上设置selected属性并记录选择的用户，以防止同时有两个用户。

{{outlet}}的位置取决于当前选择的用户。

模板部分:

{{#each model}}
  <li {{action 'select' this}}>
    {{#link-to "user" this}}{{first}}{{/link-to}}
  </li>
  {{#if selected}}
    {{outlet}}
  {{/if}}
{{/each}}

和App.ApplicationController部分:

App.ApplicationController = Ember.ArrayController.extend({
  currentUser: null,
  actions: {
    select: function(newUser) {
      var oldUser = this.get('currentUser');
      if(newUser !== oldUser) {
        if(oldUser)
          oldUser.toggleProperty('selected');
        this.set('currentUser', newUser);
        newUser.toggleProperty('selected');
      }
    }
  }
});

最后，模型定义:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  }
});
App.User = DS.Model.extend({
  first: DS.attr(),
  last: DS.attr(),
  avatar: DS.attr()
});

链接到JSBin: http://jsbin.com/cilari/3/

您可以在这里使用组件的功能。

我在JSBin上做的:http://jsbin.com/zovos/2/

首先，将用户详细信息声明为一个新组件，写入user-details: 
<script type="text/x-handlebars" id="components/user-details">
  <li>{{user.first}}</li>
  <h2>
    {{user.first}} {{user.last}}
    <img {{bindAttr src="user.avatar"}} class="pull-right" width=50 />
  </h2>
  <dl>
    <dt>First</dt>
    <dd>{{user.first}}</dd>
    <dt>Last</dt>
    <dd>{{user.last}}</dd>
  </dl>
</script>

然后从列表中调用它，使用当前用户作为组件中的用户:

<script type="text/x-handlebars">
  <div class="container">
    <div class="row-fluid">
      <ul class="nav nav-list span3 well">
        {{#each model}}
          {{user-details user=this}}
        {{/each}}
      </ul>
    </div>
  </div>
</script>

为组件添加selected属性和expandDetails:

操作
App.UserDetailsComponent = Ember.Component.extend({
  selected: false,
  actions: {
    expandDetails: function() {
      this.toggleProperty('selected');
    }
  }
});

最后，将操作添加到组件模板中，并在selected属性上添加条件显示:

<script type="text/x-handlebars" id="components/user-details">
  <li><a {{action "expandDetails"}}>{{user.first}}</a></li>
  {{#if selected}}
    <h2>
      {{user.first}} {{user.last}}
      ...
    </dl>
  {{/if}}
</script>

当然，你还可以去掉你的用户路由。

这是一个链接到烬的指南，显示这在一个示例帖子的例子:http://emberjs.com/guides/components/handling-user-interaction-with-actions/

你在找手风琴吗?

http://addepar.github.io//ember-widgets手风琴

我有一个想法，但尚未证实，也许你可以试试。

  1. 详细说明，您只需要一个模板。对于master，您需要编写几个命名的outlet(参见:http://emberjs.com/guides/routing/rendering-a-template/)，并将每个outlet放置在master视图对应项的下面。

  2. 当每个master item被点击后，你需要传递一个参数给detail route，让它知道应该填充什么样的数据

  3. 关键部分是路由的renderTemplate钩子(参见:http://emberjs.com/api/classes/Ember.Route.html#method_renderTemplate)。你可以利用它，因为它允许你指定应该使用哪个命名出口来呈现模板。

或者您可以一次加载所有细节数据并缓存，然后在点击主项目时传递标识符，这样可以提前过滤模型，为以后的renderTemplate使用做好准备。

这只是一个想法，目前没有空闲时间去尝试，但正如你所愿，你得到了专用的路线，控制器和模型。我认为这是非常可行的，如果你有任何进展请告诉我。

相关文章：