2

I'm quite new to FRP and bacon.js, so I might be doing something quite stupid.

The test app has a textarea and a submit button; the submit button adds values to a list and I show the list with React every time there is a change. Here's a gist with the code: https://gist.github.com/svileng/1f3702df855b50ed2f5e

The bug I'm trying to fix is that I can click the submit button many times, and the last value from the textarea keeps getting added to the list. The problem (I guess) is that in line 18, I'm clearing the value of the textarea manually. So the event stream newCommentValueS and property newComment are not updated, and the last value hangs around.

How can I fix that or go around the problem? Thanks!

OlliM
  • 7,023
  • 1
  • 36
  • 47
Svilen
  • 2,608
  • 24
  • 26

1 Answers1

2

One way to solve this is to use textFieldValue from bacon.jquery. It creates a Model, which is an extension of a Property that can be written to. You code would then be something like:

var newCommentValueM = Bacon.$.textFieldValue("#new-comment", "")
var newComment = newCommentValueM.filter(v => v.length > 0)

var commentAdded = Bacon.when(
    [newComment, buttonClickS], (comment, click) => {
        console.log("Submit comment: " + comment)
        newCommentValueM.set("")
        return comment
    }
)
OlliM
  • 7,023
  • 1
  • 36
  • 47
  • Thanks for your answer, OlliM! That seems to work with only, though. Is there a pure JS solution that also handles – Svilen May 20 '15 at 09:48
  • 1
    You can create your own Bacon.Model with [`Bacon.Binding`]( https://github.com/baconjs/bacon.model#baconbindingoptions), this is how bacon.jquery is implemented. – OlliM May 20 '15 at 10:09
  • 1
    If you are writing your app with React, I would suggest using a combination of react event handlers and `Bacon.Bus` instances to get the values from dom - using dom event handlers with elements created with React can cause complexity and bugs. – OlliM May 20 '15 at 10:11