使用 ember.js 理解模型/控制器/模板


Understanding Models/Controllers/Templates with ember.js

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

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

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

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

我的问题是：

  • 如何从控制器中获取模型中的数据
  • 控制器可以从多个模型中获取数据吗？如果是这样，这是如何完成的？
  • 如果控制器有多个与之关联的功能，您如何在模板中触发正确的功能。

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

    参考 Mike 的 Template to multiple controllers 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
      //index.html

      <script type="text/x-handlebars" id="index">
         
         

         {{#each App.menuController}}
              {{title}}
         {{/each}}
     

      // 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"
    });

    从上面可以看出，我有一个路由"索引"。在默认索引模板中，我试图弄清楚如何调用多个控制器的操作。在这种情况下，我想调用属于 App.ChatController 的 "getMessage"

    相关讨论

    How do you grab data from the model from the controller

    默认情况下，路由的模型(路由的 model 钩子返回的对象)将被注入到控制器中，并且可以通过控制器的 content 属性(也称为别名作为 model).

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

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

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

    控制器功能通过把手 {{action}} 助手触发。该助手的第一个参数是要触发的函数的名称。所以{{action"save"}}会触发控制器的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.

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

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

    从技术上讲，这可以通过使用全局变量来完成，但请不要这样做。控制器非常轻量级。每个模板都有它自己的控制器。如果模板需要来自其他控制器的数据，那么它的控制器应该使该数据可用。这可以通过 needs 属性来完成。请参阅管理控制器之间的依赖关系

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
      {{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', '');
        }
      })
    相关讨论