Question

我正在尝试将ember js用于个人项目。我正在努力理解哪些部分扮演了Ember的不同组成部分。

我对Rails非常熟悉，并且我在某种程度上使用了主干（从未使用过与路由相关的所有内容），并了解它们中的两个是如何工作的，以及哪种对象扮演MVC的哪个部分。 / p>

对于Ember来说，事情并不那么明显，似乎不那么容易。我已经阅读了指南和一些帖子，但我仍然在努力开始。我得到了模型部分，它与它的rails和骨干对应物非常相似。我也得到模板，把手，那些东西。路由器类似于rails路由器。

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

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

导航栏似乎适合View，但是我需要将状态保持在某个位置（以突出显示当前页面），这似乎是控制器角色。用户窗口小部件似乎适合控制器，但每条路径只有一个控制器，那么如何做到这一点？

非常感谢你的时间，我希望我足够清楚！

：）

Answer 1

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

假设这是你的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);
  }
});

来自Rails＆amp;骨干到余烬

1 个答案: