Question

大家好我计划有一个看起来像这样的布局：

https://wireframe.cc/uk2C4L

这是我的第一个Ember应用程序，当我应该利用{{outlet}}

来利用子视图时我非常好奇

我的问题是，我应该在一个页面上创建导航栏和整个聊天视图

或者我应该创建导航栏然后有一个子视图{{outlet}}，它将成为聊天窗口。

当我点击不同的聊天链接时，我不希望页面刷新，我只想通过活动聊天中的聊天来重新加载聊天窗口。

这将是我的第一个Ember项目，我只是想知道我应该采用哪种方式，我通过指南阅读了非常有帮助但是就像我说我不知道我是否应该制作一个模板上的导航栏/聊天，或者我是否应该创建导航栏然后插入聊天屏幕。任何信息都会很棒，谢谢

Answer 1

因为它是你的第一个Ember应用程序，它让我们帮助你解决这个问题。 ;但是，不过，我认为一个小的演示和一些指针不会受到伤害。

所以考虑一下这样的应用程序，人们是想通过链接分享聊天室还是只是将它们加入书签并轻松地重新登录？如果您回答是，那么您应该创建一个与您的用例相对应的路线，在这种情况下，您应用程序将需要一个类似于此的路由器：

// router.js
Router.map(function() {
  this.route('friends')
  this.route('users')
  this.route('chatrooms',function(){
    this.route('room',{path:'/:id'})
  })
});

相应的路线模板

// templates/chatrooms.hbs
<div class='flex-container'>
  <div class='flex-sidebar'>
    <ul>
    {{#each model as |chatroom|}}
      <li>
        {{#link-to 'chatrooms.room' chatroom}}
          {{chatroom.name}}
        {{/link-to}}
      </li>
    {{/each}}
    </ul>
  </div>
  <div class='flex-content'>
    {{outlet}}
  </div>
</div>

// templates/chatrooms/room.hbs
<h3>Headline:{{model.name}}</h3>
<hr/>
<ul>
  {{#each model.posts as |post|}}
        <li>{{post.user.name}}:{{post.title}}</li>
  {{/each}}
</ul>
<hr/>
{{input value=newMessage placeholder='Type new message here'}}

您可以查看一个有效的示例https://math.stackexchange.com/q/123128。

随着您的应用程序变得越来越复杂，您可以开始对其中的某些部分进行组件化，例如，您可以创建用于键入新消息的组件，以及包含用户的身份验证状态的导航栏组件。您可能还需要包含此状态的服务，然后您可以将其注入组件中。

何时使用Emberjs的子视图

1 个答案: