2

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

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

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

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

我的问题是:

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

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

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

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

这允许我为每个特定的渲染指定一个特定的控制器。

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

4

1 回答 1

4

如何从控制器中获取模型中的数据

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

控制器可以从多个模型中获取数据吗?如果是这样,这是如何完成的?

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

如果控制器有多个与之关联的功能,您如何在模板中触发正确的功能。

控制器功能通过车把{{action}}助手触发。该助手的第一个参数是要触发的函数的名称。所以{{action "save"}}会触发控制器的save函数并{{action "cancel"}}触发cancel函数。

任何示例都会有所帮助...我一直在四处搜索,在大多数情况下,它们处理的是一个简单的情况,即一个控制器与一个模型链接,而控制器与一个模板链接。

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

如果模板想要使用多个控制器会发生什么?

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

  {{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', '');
    }
  })
于 2013-08-29T00:21:06.983 回答