Binding.scala: bind does not work in a simple example used in Github Pages

Question

I want to use Binding.scala in my Github Pages.

The Problem I have is that the value that I bind is not updated.

Here the example:

  val radiusVar = Var(3.0)

  @dom
  private lazy val plotly: Binding[HTMLElement] = {
    val radiusVal = radiusVar.bind
    println(s"new radius: $radiusVal") // this part is not executed after updating the radiusVar

    <div class="ui form">
      <div class="field">
        <label>Radius</label>
        <input type="text" name="radius" id="radius" value={
      radiusVal.toString
    }/>
      </div>
            <button class="ui button" 
      onclick={
      _: Event =>
        println("radius.value: " + radius.value) // this works
        radiusVar.value = radius.value.toInt
    }>Submit</button>
</div>
  }

Whenever changing the radius, I expect that println(s"new radius: $radiusVal") is executed.

It works in ScalaFiddle from Yang Bo: https://scalafiddle.io/sf/PET64Sz/1

The rendered Page: Github Pages

The whole project: Github

@YangBo That's the thing - it does not work here: https://pme123.github.io/github-pages-demo/programming/2019/04/22/simple-binding.html - but what is the difference? — pme, Apr 25 '19 at 09:01
@pme I've copied your code from [here](https://github.com/pme123/github-pages-demo/blob/1d756c1e5ba47b5021c2befbe9ff96d2a30061c6/src/main/scala/pages/demo/SimpleApp.scala#L30). Then swap all the *println*s to *console.log*. And this works just fine. https://scalafiddle.io/sf/PET64Sz/4 — lxohi, Apr 25 '19 at 10:20
@pme Here is another version adding that value to the *Radius* label. You can see it changes on the page. https://scalafiddle.io/sf/PET64Sz/5 — lxohi, Apr 25 '19 at 10:22
@Ixohi I know - it works in ScalaFiddle (as also Yang Bo pointed out) - the problem is that it does work in combination with Jekyll - see here: https://pme123.github.io/github-pages-demo/programming/2019/04/22/simple-binding.html — pme, Apr 25 '19 at 10:32

score 1 · Accepted Answer · answered Apr 25 '19 at 12:07

1

The problem was that I included the ..-fastopt-bundle.js more than ones.

It looks like the second action was called on the other "JavaScript".

answered Apr 25 '19 at 12:07

pme

14,156
3
52
95

Binding.scala: bind does not work in a simple example used in Github Pages

1 Answers1