ember.js - 使用 ember.js 理解模型/ Controller /模板

Question

我正在尝试学习 ember.js，并且很难在这一切之间建立联系。我已经浏览了 ember.js 上提供的教程，但仍然有点困惑。

该模型包含将保存在服务器上的数据。 Controller 可以访问模型的数据并可以装饰它(添加它的显示数据)并将其发送到模板本身。

在示例中，他们使用路由类从模型中实际获取数据。他们将路线与模型相关联，只需调用 .find() ，然后 find() 就会返回模型中的数据列表。

在我的示例中，我只使用了一条路线:

我的问题是:

如何从 Controller 中获取模型中的数据

Controller 可以从多个模型中获取数据吗？如果是这样，这是如何完成的？

如果 Controller 有多个与之关联的功能，您如何在模板中触发正确的功能。

任何示例都会有所帮助...我一直在四处搜索，在大多数情况下，它们处理的是一个简单的情况，即一个 Controller 与一个模型链接，而 Controller 与一个模板链接。如果模板想要使用多个 Controller 会发生什么？

引用 Mike 的 Template to multiple controllers 示例:

  //index.html

  <script type="text/x-handlebars" id="index">
     <div {{action getMessage}} > </div>
     <div {{action getTest}} > </div>

     {{#each App.menuController}}
          {{title}}
     {{/each}}
  </script>

  // app.js

  App.ChatController = Ember.Controller.extend({
     getMessage: function() { alert("getMessage Called"); }
  });

  App.MenuOption = Ember.Object.extend({
    title: null,
    idName: null
  });

  App.MenuController = Ember.ArrayController.create({
  content:[],
  init : function() 
  {
        // create an instance of the Song model
        for(var i=0; i<menuOptions.length; i++) {
            console.debug(menuOptions[i]);
            this.pushObject(menuOptions[i]);
        }

  },
  getTest: function() { alert("getTest Called"); }
});

//router.js
App.Router.map(function () {
  this.resource('index', { path: '/' });
});

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return ['a','b', 'c' ];
  },
  setupController: function(controller, model) {
        controller.set('content', model);
  },

});

App.IndexController = Ember.Controller.extend({
  needs: "index"
});

从上面可以看出，我有一个路线“索引”。在默认索引模板中，我试图弄清楚如何调用多个 Controller 的操作。在这种情况下，我想调用属于 App.ChatController 的“getMessage”和属于 App.MenuController 的“getTest”。目前，没有为模板的 Controller “index”定义“getTest”，也没有由 IndexRoute 定义。那么您是否使用“需要”将 MenuController 链接到 IndexController，以便我可以调用 Controller 的 getTest 方法。

更新 - - - - - - - - - - - - - - - - -

我最终去了渲染路线

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return ['a','b', 'c' ];
  },
  renderTemplate: function () {
        this.render();
        this.render('menu', { outlet: 'menu', into: 'application', controller: App.menuController });
        this.render('userList', { outlet: 'userList', into: 'application', controller: App.UserListController });
  }
});

这允许我为每个特定的渲染指定一个特定的 Controller 。

任何建议表示赞赏，
谢谢，
D

Answer 1

How do you grab data from the model from the controller

默认情况下，路由的模型(由路由的 model 钩子(Hook)返回的对象)将被注入(inject)到 Controller 中，并且可以通过 Controller 的 content 访问。属性(也别名为 model )。

Can a controller get data from more then one model? If so, how is this done?

是的，有可能。可以通过路由的 setupController 在 Controller 上设置其他模型钩。也就是说，在大多数情况下，您将需要使用多个 Controller 。

If the controller has more then one function associated with it, how do you trigger the right one within the template.

Controller 功能通过 Handlebars 触发 {{action}} helper 。该助手的第一个参数是要触发的函数的名称。所以 {{action "save"}}将触发 Controller 的 save功能和 {{action "cancel"}}触发 cancel功能。

Any examples would help... I've been searching around and in most cases they deal with the simple case where there is one controller linked with one model and the controller is linked with one template.

很难找到这样的例子的原因是因为它不是最佳实践。当然，可以将一个 Controller 链接到多个模型或使用多个 Controller 的模板，但这不是一个好主意。

What happens if the template wants to use more then one controller?

从技术上讲，这可以通过使用全局变量来完成，但请不要。 Controller 非常轻量级。每个模板都有自己的 Controller 。如果模板需要来自其他 Controller 的数据，那么它的 Controller 应该使该数据可用。这可以通过 needs 来完成。属性(property)。见 managing dependencies between controllers

  {{each message in messages}}
    {{message.username}}: {{message.text}}
  {{/message}}
  {{input valueBinding="text"}}
  <button {{action send}}>Send</button>

  App.ChatController = Ember.Controller.extend({
    needs: ['messages', 'currentUser'],
    messagesBinding: 'controllers.messages'
    send: function() {
      var message = App.Message.createRecord({
        username: this.get('username'),
        text: this.get('text')
      });
      message.save();
      this.set('text', '');
    }
  })