The data-is attribute is not updated for dynamic tags #2037

Closed
GianlucaGuarini opened this Issue Oct 19, 2016 · 2 comments

Projects

None yet

3 participants

@GianlucaGuarini
Member
GianlucaGuarini commented Oct 19, 2016 edited

Please check the example http://plnkr.co/edit/VXXbDHz1ZgUjRwUwLTev?p=preview
The data-is attribute should be updated using the new tag name in order to be styled properly

@GianlucaGuarini GianlucaGuarini added this to the 3.0.0 milestone Oct 19, 2016
@vitogit
Contributor
vitogit commented Oct 20, 2016

I tried to fix this. I think the problem is that the data-is is not updating the value when the update() is executed. If we force it, it will work. In your sample, using setAttribute

  <div ref="divi" data-is={ child }></div>


    onClick() {
      this.child = this.child === 'foo' ? 'bar' : 'foo'
      this.refs.divi.root.setAttribute('data-is',this.child)
    }

I tried to look at the riot source, and created this minimal test

  it.only('data-is value is dynamically updated', function() {
    injectHTML('<dynamic-data-is></dynamic-data-is>')
    var tag = riot.mount('dynamic-data-is')[0]
    var singleTag = tag.refs.singleTag
    tag.single = 'color'
    tag.update()
    expect(singleTag.root.getAttribute('data-is')).to.be.equal('color')
    tag.unmount()
  })

with the tag:

<color>
</color>

<calendar>
</calendar>

<dynamic-data-is>
  <div ref="singleTag" data-is={single}></div> 
  this.single = 'calendar'
  change_data() {
    this.single = 'color'
  }
</dynamic-data-is>

I think that in updateExpression from lib/browser/tag/update.js we should access the data-is property and set it, but I don´t know how riot reach that tag from the code.

How the update method works? It´s iterate over the element attributes? because I added some console.logs and saw that it access the ref attribute but not the data-is attribute.

Is there a way to debug the riot code better that using logs anywhere? I tried the karma debug, but it uses the minified version and is hard to follow. Any suggestion?

@rsbondi rsbondi self-assigned this Oct 23, 2016
@rsbondi
Contributor
rsbondi commented Oct 23, 2016

dfc6168

@rsbondi rsbondi added the fixed label Oct 23, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment