reactive-programming-exercise/messaging.html at master · Software-Craftsmanship-Group-Shanghai/reactive-programming-exercise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
  <head>
    <script src="jquery.js"></script>
    <script src="Bacon.js"></script>
    <script src="coffee-script.js"></script>
    <script type="text/coffeescript">
    $ ->
      to = $("#to").asEventStream("keyup").toProperty()
      message = $("#message").asEventStream("keyup").toProperty()

      both = to.and(message).map((event)->
        value = $(event.target).val()
        value is "" or not value
      )

      both.assign($('#send'), 'prop', 'disabled')

    </script>
    <script>
    $(function(){
      var $price, $total, $quantity;
      var id = function(event) {
        return $(event.target).val();
      }


      $price = $("#price").asEventStream("keyup").map(id)
      $quantity = $("#quantity").asEventStream("keyup").map(id)
      $total = $("#total").asEventStream("keyup").map(id)

      var quantity = $quantity.toProperty(0);

      var price = Bacon.when(
        [$price], function(value){return value},
        [$total, quantity], function(x,y) { return x/y })
       .toProperty(0)

      var total = Bacon.when(
        [$total], function(value){return value},
        [$price, quantity], function(x,y) { return x*y},
        [price, $quantity], function(x,y) { return x*y})
       .toProperty(0)

       price.assign($('#price'), 'val')
       quantity.assign($('#quantity'), 'val')
       total.assign($('#total'), 'val')

    })
    </script>
  </head>
  <body>
    <h1>bacon.js example page</h1>
    To: <input type="text" id="to"><br>
    Message: <input type="text" id="message"><br>
    Errors: <div id="errors"></div><br>
    Network: <div id="output"></div><br>
    <button id="send" disabled="disabled">SEND</button>

    <div>
      <input id="price">
      <input id="quantity">
      <input id="total">
    </div>
  </body>
</html>