0

我正在个人项目中试用 ember js。我正在努力理解 Ember 的不同组成部分是哪一部分。

我对 Rails 非常熟悉，并且在一定程度上使用了主干（从未使用过与路由相关的所有内容），并了解它们两者的工作原理，以及什么样的对象扮演 MVC 的哪个部分。

使用 Ember，事情就不是那么清楚了，而且似乎不太容易。我已经阅读了指南和一些帖子，但我仍在努力前进。我得到了模型部分，它与它的导轨和骨干对应物非常相似。我也有模板、车把之类的东西。路由器类似于rails路由器。

然后是控制器、路由和视图。据我了解，视图代表 ui 的一部分，并处理用户交互。我不太了解的是控制器/路由角色。

更具体地说：我希望我的应用程序有一个导航栏（带有指向页面部分的链接）和一个“用户连接小部件”，如果他已连接则显示用户数据，如果没有则允许他这样做，通过 facebook 等登录.

导航栏似乎适合视图，但是我需要将状态保留在某处（以突出显示当前页面），这似乎是控制器角色。并且用户小部件似乎适合控制器，但每个路由只有一个控制器，那么如何做到这一点？

非常感谢您的时间，我希望我已经足够清楚了！

:)

4

1 回答 1

1

控制器存储应用程序的状态。路由器管理应用程序的不同状态。你是对的，每条路由只有一个控制器，但你也可以访问其他控制器。

假设这是您的html：

<script type="text/x-handlebars" data-template-name="application">
  <div class="main-content">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <div class="nav-bar">
    <div class="user">
      {{#if isLoggedIn}}
        <div class="user-name">{{userName}}</div>
        {{else}}
        <button {{action "login" target="App.UserController"}}>
            Login
        </button>
        {{/if}}
    </div>
  </div>
  <div class="content">some other amazing content here</div>
</script>

和JS：

var App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  rootElement: '#ember-app'
});

App.Router.map(function () {
  this.route('user');
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controller.set('isLoggedIn', this.controllerFor('user').get('isLoggedIn'));
  }
});

App.UserController = Ember.ObjectController.extend({
  isLoggedIn: false,
  userName: 'emberjs',
  login: function () {
     this.set('isLoggedIn', true);
  }
});

App.NavbarView = Ember.View.create({
  loggedInBinding: Ember.Binding.oneWay('App.UserController.isLoggedIn')
});

如果你需要从你的路由访问另一个控制器，你可以这样做：

App.IndexRoute = Ember.Route.extend(function () {
  setupController: function () {
    var userController = this.controllerFor('user');
    console.log('this is a user controller instance', userController);
  }
});
于 2013-02-16T19:56:13.950 回答