Ember.Component attributeBindings doesn't work with namespaced attributes? (e.g. xlink:href)

[benlesh]

The following code produces undesired results:

export default Ember.Component.extend({
  tagName: 'image',

  attributeBindings: ['src:xlink:href', 'x', 'y', 'width', 'height'],

  src: '/mericuh-flag.gif'
});

It ends up setting xlink="/mericuh-flag.gif" rather than xlink:href="/mericuh-flag.gif"

Suggested workaround from @ebryn was to use an observer and manually set, which I'm fine with for now.

[stefanpenner]

related: #9297

[benlesh]

For now my workaround is to have the computed property set the attribute directly:

src: function(key, value) {
  if(arguments.length > 1) {
    this.$().attr('xlink:href', value);
  }
  return this.$().attr('xlink:href');
}.property(),

[wagenet]

@stefanpenner what's the next step for this?

[cwarny]

@Blesh Your workaround doesn't work for me. I get Something you did caused a view to re-render after it rendered but before it was inserted into the DOM. And what if the URL you want to pass depends on other properties? Not sure how to pass that value with your solution.

[benlesh]

@cwarny - It's hard to say without seeing it reproduced. For now the work around works fine for me. (but I'm still in 1.7.0-beta.5, for at least the next week or so)

[cwarny]

Here is my use case:

// tile-image.js

export default Ember.Component.extend({
    tagName: "image",
    attributeBindings: ["x", "y", "width", "height", "src:xlink:href"],
    width: 1,
    height: 1,
    x: function() {
        return this.get("t")[0];
    }.property("t"),
    y: function() {
        return this.get("t")[1];
    }.property("t"),
    src: function(key, value) {
        if(arguments.length > 1) {
            var t = this.get("t");
            this.$().attr("xlink:href", "http://%@.tiles.mapbox.com/v4/.../%@/%@/%@.png?access_token=...".fmt(["a", "b", "c", "d"][Math.random() * 4 | 0], t[2], t[0], t[1]));
        }
        return this.$().attr("xlink:href");
    }.property("t")
});

And each tile-image is called in a {{each}} loop in the parent template, passing tile data as the t property.

Do you notice anything weird? I'm using Ember 1.8.1

[benlesh]

Oh... remove the "src:xlink:href" from your attributeBindings, the workaround is meant to replace that (for now)

[cwarny]

It's probably me being silly but when I drop that from attributeBindings, then the attribute never gets added to <image> because the property src never gets called... There's something else that I don't get: isn't it dangerous to refer to this.$() in a computed property, because it might be computed prior to rendering, in which case this.$() will return nothing? Sorry if this is not the right place for this discussion

[benlesh]

Possibly. The work around above worked in my specific scenario.

You could also just observe src and set the attribute in a run once or run next... It's a hack, but it's a hack for a workaround, afterall, and it should be commented as such.

Something like:

src: undefined,

_updateLinkHref: function(){
  this.$().attr('link:href', this.get('src'));
},

_updateSrc: function(){
  Ember.run.once('afterRender', this, this._updateLinkHref);
}.observes('src').on('didInsertElement'),

[mixonic]

This is also tracked by tildeio/htmlbars#224

[mixonic]

@oneeman is going to implement a plan described at #10186 (comment), I believe.