Skip to content
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
Closed

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

GianlucaGuarini opened this issue Oct 19, 2016 · 2 comments
Assignees
Labels
Milestone

Comments

@GianlucaGuarini
Copy link
Member

@GianlucaGuarini 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
Copy link
Contributor

@vitogit 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
Copy link
Contributor

@rsbondi 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.