Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

There is no attribute "id" in any tag definition

See original GitHub issue

Actual workaround :

div(.....) {
   attributes["id"] = "special-div"
}

Expected api :

div(id = "special-div".....) {}

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:7 (2 by maintainers)

Top GitHub Comments

4reactions

fatjoemcommented, Jul 13, 2018

I am currently converting the templates for a large website to kotlinx.html. Those templates are using id and also class attributes a lot. Being able to add classes as a parameter but not the id, feels very inconsistent and unsexy.

In a new project I would try to minimize using id attributes, hence this will not be a big issue. But for converting existing projects, it is a big pain.

1reaction

Tatskaaricommented, Mar 13, 2018

Hi, just had a similar confusion and came up with this helper function for divs which allows specifying arbitrary attributes:


import org.testng.annotations.Test
import kotlinx.html.*
import kotlinx.html.stream.appendHTML
import java.io.StringWriter
import kotlin.test.assertEquals


object HTMLTest {
  fun FlowContent.div(classes: String = "", vararg attributes: Pair<String, String>, block: FlowContent.() -> Unit) {
    val attributeMap = attributes.toList()
      .plus("class" to classes)
      .associate { it }
    DIV(attributeMap, consumer).visit(block)
  }
  
  

  @Test
  fun `test html with attribute list`(){
    val stringWriter = StringWriter()
    stringWriter.appendHTML().html {
      body {
        div ("main", "id" to "main-body", "style" to "float: left") {
          text("main")
        }
      }
    }
    assertEquals("""
<html>
  <body>
    <div id="main-body" style="float: left" class="main">main</div>
  </body>
</html>""".trim(), stringWriter.toString().trim())
  }
}

What do you think? I find the pattern a bit more intuitive (especially for people less familiar with Kotlin) than accessing fields of the tag object via extension method magic.