0

I'm having an issue here when attempting to build an integration to our partners. They're gonna submit an image URL as a GET-variable, which I obviously don't want to print straight up. The submitted image URL is submitted back to our servers with AJAX to be sanitized, returned and then updated.

What I want to do here is when the model loads, I want to display a placeholder image, and when the sanitation check is done by the server, it will return the URL (the same or another placeholder) that is to be set as the template image source.

Now, the problem is that I don't get how to make Ember listen for the update of this event. I'm trying to use observes, but apparently, this isn't available in the route. Here's my current code:

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

VIEW

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

I get the error message:

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

I'm not at all sure as of how to make this happen. Am I going about this the wrong way? Any help is appreciated.

Thank you for your time.

Best regards, dimhoLt

PS. I've extracted the applicable pieces of code from much bigger objects, so if there are any typos, missing commas etc, it's due to the copy-paste and is not applicable to the actual code.

EDIT:

Worth noting is that because of legacy functionality I haven't yet rewritten, I was forced to turn off Ember extended prototypes. This is, I guess, the major cause of the issue.

Since I wrote this, I've also gone over to using a fixed model instead of attempting to work directly with the route.

1 Answer 1

0

You need to use a 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;
}
3
  • Hello kingpin2k, thanks for the reply. The problem isn't that I don't get a reply, but that I can't observe the result. The setter works just like how I did it today, but since I had to turn off Ember extended prototypes, the template isn't updated when the AJAX result is returned... Jan 7, 2014 at 13:34
  • The sample I gave doesn't rely on the extensions, And you aren't updating a reference, you're returning a new model that has a new string(aka it isn't referring to this anymore).
    – Kingpin2k
    Jan 7, 2014 at 15:16
  • Right! I must have done something wrong. It worked now when I tried again. Many thanks for your time and awesome example! Jan 7, 2014 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.