由AJAX加载并在视图中更新的EmberJS的特定属性

时间:2014-01-06 15:19:11

标签: ajax ember.js

我在尝试与合作伙伴建立集成时遇到问题。他们要提交一个图像URL作为GET变量,我显然不想直接打印。提交的图像URL通过AJAX提交回我们的服务器进行清理,返回然后更新。

我想在这里做的是当模型加载时,我想显示一个占位符图像,当服务器完成卫生检查时,它将返回将要的URL(相同或另一个占位符)设置为模板图像源。

现在,问题是我不知道如何让Ember听取此事件的更新。我正在尝试使用observes,但显然,这在路线中不可用。这是我目前的代码:

ROUTE

MyApp.PartnerRoute = Ember.Route.extend({
    imageUrl: "/img/placeholder.png";

    getImageUrl: function(imageUrlToCheck) {
        instance = this;

        $.ajax({
            url: "/ajax/get-image-url",
            type: "post",
            data: {
                "imageUrl": imageUrlToCheck
            },
            success: function(response) {
                if(response.status === 0) {
                    instance.set("imageUrl", response.data.imageUrl);
                }
            }
        });
    },

    // Ember update property.
    imageUrlDidChange: function() {
        this.get("imageUrl");
    }.observes("imageUrl"),

    model: function(params) {
        this.getImageUrl(params.imageUrl);

        return {
            heading: "Welcome!",
            imageUrl: this.imageUrl
        }
    }
});

查看

<script type="text/x-handlebars" data-template-name="partner">
    <h1>{{heading}}</h1>
    <img {{bind-attr src=imageUrl}} />
</script>

我收到错误消息:

Uncaught TypeError: Object function () {
    this.get("imageUrl");
} has no method 'observes'

我不确定如何实现这一目标。我是以错误的方式来做这件事的吗?任何帮助表示赞赏。

感谢您的时间。

祝你好运, dimhoLt

PS。我从更大的对象中提取了适用的代码片段,因此如果有任何拼写错误,缺少逗号等,则由于复制粘贴而不适用于实际代码。

修改

值得注意的是,由于我还没有重写的遗留功能,我不得不关闭Ember扩展原型。我猜这是问题的主要原因。

自从我写这篇文章以来,我也转而使用固定模型,而不是试图直接使用该路线。

1 个答案:

答案 0 :(得分:0)

您需要使用setter

http://emberjs.jsbin.com/OxIDiVU/117/edit

model: function(params) {
  var model = {
    heading: "Welcome!",
    imageUrl: this.imageUrl
  };

  this.getImageUrl(params.imageUrl).then(function(result){
      Em.set(model, 'imageUrl', result.imageUrl);
  });

  return model;
}