Behaviour change not triggered by assignment

[Bennit]

I got a couple of input fields that are used to determine and show the properties of some shapes that are drawn.

Initially these fields were only used for shape creation, so they fit nicely in the picture of time-varying data. So I create a behaviour for each input field.

For color fields I have a little example div that shows the color consistent to the color field behaviour.

Now my interface also allows to change shapes that you select, using the same fields. When an item is selected, I change the values for these fields programmatically by a simple assignment of the field's value property. As can be seen in the following picture, the fill's example div is not updated, nor is the actual behaviour's value for fill.

A simplified setup showing this issue is given here: http://jsfiddle.net/Bennit/TKF4T/2/  

Now the easy fix is to trigger an onchange event manually (http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually), but I wonder if a behaviour is still the right solution for this specific problem, or if there is a more automated approach in programmatically changing input behaviours.

Kind regards

Ben

[Bennit]

http://jsfiddle.net/Bennit/TKF4T/8/  # this is the fix I thought would work, but apparently something goes wrong still.

The change event is triggered since the console shows 'changed!' via the onchange bind in the html code.

So I looked up what events on these text fields should trigger behaviour change:

  case 'text':

  case 'textarea':

  case 'hidden':

  case 'password':

    result = startsWith(

      filterRepeatsE(

        extractDomFieldOnEventE(

          triggerE ? triggerE :

          extractEventsE(

            objD, 

            'click', 'keyup', 'change'),

          objD,

          'value'),parseInt(objD.value)),

      objD.value);

    break;

This clearly says that it should extract 'click','keyup' and 'change' events, though it seems not to?

Ben

[Joe Gibbs Politz]

I think you might be looking for collectE and insertValueE.  I don't think I entirely understand what you need, but here's a fix to the example that does what you want:

http://jsfiddle.net/TKF4T/9/

I'm not sure why Flapjax isn't firing the event you want; DOM events on value changes that don't come from a user action can be somewhat unreliable.  At the same time, setting value directly is breaking Flapjax's model by mucking with the DOM directly, which can lead to inconsistent states (sometimes it is necessary, though).

In situations like these, if you can find a way to use insertValueE or insertValueB, Flapjax will hook up the dependencies in the right way.  In the example I give, I used collectE() to "fold" the clicking events over an accumulator; perhaps you can do the same with colors?

Let me know if this helps.  Cheers!
Joe P.

--
Flapjax home page: www.flapjax-lang.org
Flapjax list: groups.google.com/group/flapjax
Post: fla...@googlegroups.com
Unsubscribe: flapjax-u...@googlegroups.com

[Leo Meyerovich]

And one more for fun: http://jsfiddle.net/BvNM7/

Code style is a little different -- I like to use  "insertDomB"  because specifying and passing around the DOM as declarative time-varying value is, basically, amazing :)

Perhaps you can put the fiddle of the full example in if this doesn't work?

Regards,

- Leo

[Bennit]

Based on your fiddle, http://jsfiddle.net/BvNM7/2/ , you can create a more programmatic interface for updating the size, namely via incE.sendEvent().

Exactly what I needed. Thanks.

[Bennit]

Actually I was wrong, your solution with insertDomB works only one way, namely programatically:

http://jsfiddle.net/Bennit/BvNM7/11/ 

If you modify the field manually (a number field via the arrows, text field via text input, etc..), the behaviour doesn't change, as you can see in your console, there won't be any logging of 'hi' done.

Here's my counter proposal:  http://jsfiddle.net/Bennit/BvNM7/10/ 

This wraps changes in the element's behaviour together with events from the given event stream and makes sure the element displays the correct state and the behaviour knows the correct state.

Thoughts on this?

[Bennit]

http://jsfiddle.net/Bennit/BvNM7/12/  # slightly cleaned up version with comments.

[Leo Meyerovich]

Hiya Bennit,

Agreed that a smell is going on. Your solution is close to the design of tagRec and recE: https://groups.google.com/forum/?fromgroups#!msg/flapjax/iXrmkIEz5gw/CIA7wXRvlNcJ%5B1-25%5D . 

To use tagRec for this: http://jsfiddle.net/XpxFx/

The switches may not be intuitive, so here is a 2-part buildup:

1) introducing streams of commands:   http://jsfiddle.net/LR7Gz/

2) passing values instead of commands: http://jsfiddle.net/kuhJx/ . 

Hope that was fun :)

- Leo