Question

目前，我尝试将我的ember.js应用程序与我的网络服务器连接起来。 Web应用程序具有日期选择器。选择日期后，我喜欢我的模型“重新加载”。重新加载我的意思是向我的网络服务器询问包含特定日期的新数据。

下面您将看到我的路线与服务器联系以获取所需信息。

App.PicturesRoute = Ember.Route.extend({
    model: function(params) {
        return $.getJSON('http://api.<server>.com/pictures?date=' + params.date).then(function(data) {
            return data.pictures.map(function(picture) {
                picture.body = picture.content;
                return event;
            });
        });
    }
});

如果我在字符串中手动编写日期，一切正常，我收到数据。现在，我有一个问题，我不知道如何动态地做它。我应该如何在UI和模型之间创建最佳连接。当然我可以在我的控制器中实现一个动作，但是这个控制器应该如何调用/重新加载模型呢？

Answer 1

由于date是您网址的一部分，因此您应该使用transitionTo或transitionToRoute。您可能已设置路线，以便匹配类似/pictures/2013-10-09的网址。事情变得有点时髦，因为2013-10-09不是真正的对象id。通常使用transitionToRoute Ember希望您传入代表您正在转换的内容的实时模型。如果路由被直接命中（没有model或link-to），这将是Ember通过执行transitionTo挂钩查找的对象。由于日期实际上是查询参数而不是ID，因此您可以使用setupController方法来解决这个问题。

所以，你的路线可能看起来像这样（这是简化的，你当然希望使用适当的AJAX调用）：

App.PicturesRoute = Ember.Route.extend({
  model : function(params){
    console.log('calling model for PicturesRoute');
    return { date : params.date }; // return a fake model
  },
  setupController : function(controller, model){
    // Make sure not to call super since we don't want to set
    // a single object instead of an array
    // this._super(controller,model); <-- do not use!
    console.log('calling setupController for PicturesRoute');
    // Instead set the `date` property directly
    controller.set('date',model.date);
    // Then find/build an array and set it as the model
    var pictures = [
      {name : "Pic 1 - " + model.date},
      {name : "Pic 2 - " + model.date}
    ];
    controller.set('model',pictures);
    console.log(model);
  }
});

然后在应用程序中，当您从日期选择器中检测到更改时，您将调用以下内容：

var dateFromPicker = ... // however you get a hold of the date string from the picker
var fakeModel = { date : dateFromPicker };
this.transitionTo('pictures',fakeModel);

这是一个JSBin，显示了这个想法的一个非常简化的版本：http://jsbin.com/ucanam/1396/edit

我希望这是有道理的。

在前端事件后从服务器加载数据

1 个答案: