代码

Question

我有两个资源，它们都有模板，模型和控制器。父资源也有一条路线。资源在Ember Data hasMany关系中彼此相关。我使用Ember-Cli

以非常直接的方式构建了这些

由于你通过第一个资源到达第二个资源（它有一个父子关系），我希望父母的网址看起来像：

/parent/:parent_id

我希望孩子的网址看起来像：

/parent/:parent_id/child/:child_id

当我尝试嵌套路由（更改路由并更改link-to帮助程序）时，以及当我显示子路径时，它会将子模板放在父模板的正下方而不是替换它。我想修改父级或替换它。

这是我目前为我输出的代码模型：

Child is not replacing parent

我想弄清楚两件事：

1）是否可以让子资源维护该URL，但替换父资源的视图（并且可能仍然可以访问这两种资源模型）？我该怎么做？

2）是否可以保留此关系/视图，但是当在父URL的上下文中查看父模板时，会导致父模板减少其视图？父母的一些细节，但更少。我该怎么做？

代码

Output I have working now for parent/:parent_id/child/:child_id（不理想的输出！与上面的codepen相同）：

<div class="row">
  <h1>Parent name</h1>
  <div class="columns">
    <div class="panel">
      <p>Parent details 1</p>
      <p>Parent details 2</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="columns">
    <h3>Child list here</h3>
    <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
      <li><div class="panel">Child 1</div></li>
      <li><div class="panel">Child 2</div></li>
      <li><div class="panel">Child 3</div></li>
      <li><div class="panel">Child 4</div></li>
      <li><div class="panel">Child 1</div></li>
      <li><div class="panel">Child 2</div></li>
      <li><div class="panel">Child 3</div></li>
      <li><div class="panel">Child 4</div></li>
    </ul>
  </div>
</div>

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>

Output of parent/:parent_id/child/:child_id if question 1 is answered（更好，我的初衷是仅显示孩子的详细信息）：

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>

Output of parent/:parent_id/child/:child_id if question 2 is answered（我决定在使用这些嵌套输出时，这是理想的输出，因为它显示了孩子，但仍然有一些上下文和更好的导航）：

<div class="row">
  <div class="row">
    <span><strong>From parent:</strong> Parent name</span>
  </div>
  <div class="row">
    <div class="small-6 columns">
      <a href="/parent/543/child/227">Previous child</a>
    </div>
    <div class="small-6 columns">
      <a href="/parent/543/child/229" class="right">Next child</a>
    </div>
  </div>
</div>

<div class="row">
  <h1>Child name</h1>
  <div class="columns">
    <div class="panel">
      <p>Child details 1</p>
      <p>Child details 2</p>
    </div>
  </div>
</div>

在Ember中渲染子资源时，如何更改或替换父模板？

代码

0 个答案: