Customize tags with inner html

[da-liii]

For example, https://ant.design/components/popconfirm/

// confirm, cancel are functions
<Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
    <a href="#">Delete</a>
</Popconfirm>

What I expect:

class Popconfirm(title: String, okText: String, cancelText: String, onConfirm: Event => Unit, onCancel: Event => Unit) extend SomeTrait {
  @some_anno override def render(body: Element): Element = ???
}

here render is the function used in macros.

But this test case(https://github.com/ThoughtWorksInc/Binding.scala/blob/11.0.x/fxml/.js/src/test/scala/com/thoughtworks/binding/DateSpec.scala) shows that <Date></Date> is Binding[Date] or another type relating to Date. It seems @fxml is not suitable for customizing tags to create something like Ant Design.

In #4 (comment) ,
there are tricks to make custom tags work, but it is without any inner html (eg. <a href="#">Delete</a>).

[Atry]

Is the syntax difference between custom tags and custom functions important for you?

If it is not important for you, you can simply create a popconfirm function and use it like this:

popconfirm(title="Are you sure delete this task?",
           onConfirm=confirm,
           onCancel=cancel,
           okText="Yes",
           cancelText="No") {
  <a href=" ">Delete</a >
}

[da-liii]

I have to admit that the syntax is important for me. I'm not sure for other people whether it is important or not? In my opinion, syntax is one reason why Binding.scala is more charming than other alternatives.

For example, in ScalaTags and HTML literal which one you will choose to use?

Syntax matters a lot. In this particular example, using the popconfirm function is indeed more flexible and general. But custom tags syntax has the power to reduce the flexibility and make it simple and consistent.

As for me, I'm developing a library(https://github.com/sadhen/Binding-SemanticUI) based on Binding.scala and SemanticUI to provide easy-to-use custom tags like Ant Design(http://ant.design), so that programmers already familiar with Ant Design would be happy to use Binding.scala.

[da-liii]

I found a more acceptable work around:

<div>
<Popconfirm title="Are you sure delete this task?"
                       onConfirm={confirm}
                       onCancel={cancel}
                       okText="Yes"
                       cancelText="No"
                       inner={
      <a href="#">Delete</a>
}/>
</div>

Comparing with

<div> {
  popconfirm(title="Are you sure delete this task?",
           onConfirm=confirm,
           onCancel=cancel,
           okText="Yes",
           cancelText="No") {
    <a href="#">Delete</a >
  }
} </div>

, which one do you prefer ?

I prefer the former one. However, using the latter one, we would have more IDE support.

[maxkorolev]

+1, that would be awesome

[csoren]

This would be great for consuming web components, such as the ones defined by Polymer.

[skaz1970]

Is the syntax difference between custom tags and custom functions important for you?

If it is not important for you, you can simply create a popconfirm function and use it like this:

popconfirm(title="Are you sure delete this task?",
           onConfirm=confirm,
           onCancel=cancel,
           okText="Yes",
           cancelText="No") {
  <a href=" ">Delete</a >
}

Please, show the body (with return type) of popconfirm

[Atry]

import com.thoughtworks.binding.dom
import org.scalajs.dom.raw._
import org.scalajs.dom.document

@dom def popconfirm(
  title: String,
  okText: String, cancelText: String,
  onConfirm: Event => Unit, onCancel: Event => Unit
)(
  // For FXML, use `Binding[Node]` instead of `Node`
  message: Node 
) = {
  <section>
    <h3>{ title }</h3>
    <div>
    { message }
    </div>
    <button type="button" onclick={onConfirm}>{
      okText
    }</button>
    <button type="button" onclick={onCancel}>{
      cancelText
    }</button>
  </section>
}

@dom
def render = popconfirm(title="Are you sure delete this task?",
          onConfirm={ _ =>
            println("confirm")
          },
          onCancel={ _ =>
            println("cancel")
          },
          okText="Yes",
          cancelText="No") {
  <a href=" ">Delete</a >
}.bind // .bind should be avoided for FXML

dom.render(document.body, render)

[skaz1970]

Thanks a lot!

[skaz1970]

But if I'd like to get instead of message: Node different types, Binding[Node], BindingSeq[Node], Binding[Option[Node]]? Can you propose anything? Is there any common type?

[Atry]

Just use ` BindingSeq[Node]` , since you can easily convert other types to it. Serg <notifications@github.com> 于2018年10月19日周五 下午2:35写道：

…

But if I'd like to get instead of message: Node different types, Binding[Node], BindingSeq[Node], BindingSeq[Option[Node]]? Can you propose anything? Is there any common type? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#42 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAktur3TIBe5wCcl2B57NZzW81ozDl5eks5umXK5gaJpZM4LqXCp> .

-- 杨博 (Yang Bo)

[skaz1970]

Thanks, my thought were around BindingSeq[Node], but converting makes code less readable.

[da-liii]

I'm trying to implement the inner html feature in https://github.com/sadhen/Binding-SemanticUI