New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
3 participants
@GianlucaGuarini
Member

GianlucaGuarini commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@vitogit

vitogit Oct 20, 2016

Contributor

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?

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

This comment has been minimized.

Show comment
Hide comment
@rsbondi
Member

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