rich-harris / statesman Goto Github PK

Rich!! You got some goodies in here!! Statesman is awesome as hell!, gonna use this one instead! :-)

Feature request! (which plays well with Anglebars)

It would be GREAT if something like the following was possible:

var observers = state.observe( 'todos.*.completed', function ( newValue, oldValue ) {
   var total = state.get('total_completed');
   total += newValue ? +1 : -1;
   state.set('total_completed', total);
   tpl.update();
});

(the above can obviously be achieved as well by setting an observer on every single item)

Check this out: https://github.com/deoxxa/dotty/blob/master/lib/index.js
:-)

Hi , thanks for the library.

How about state.unobserve(keypath), where keypath is a string. it should remove listeners for any keypath that matches.

for instance :

s.observe("video[0].title",aFunction);
s.observe("video[0].title",anotherFunction);
// 
s.unobserve("videos[0].title");
// remove the 2 previous listeners.

This library is great! Sorry to dust this off after a couple years, but I ran into one issue. Let me know if this is just the expected behavior.

When I observe an array of objects and update a value on one of those objects, the old value that is returned is actually the new value.

Observing the specific value of the object in the array works as expected.

var state = new Statesman({
   user: {
      name: 'Alice',
      friends: [ 
         {
            name: 'Bob',
            age: 20
         }
      ]
   }
});

// oldValue is the same as newValue
state.observe( 'user', function ( newValue, oldValue ) {
   console.log(oldValue); // user.friends[0].age = 21 (instead of 20)
   console.log(newValue); // user.friends[0].age = 21
}, {init: false});

// this works as expected
state.observe( 'user.friends[0].age', function ( newValue, oldValue ) {
   console.log(oldValue); // 20
   console.log(newValue); // 21
}, {init: false});

// change Bob's age
state.set( 'user.friends[0].age', 21 );

Here is a jsFiddle - type in a new value and hit submit to see it in action.

This syntax is minging:

state.set( 'data[3]', { foo: 'bar' });

// or even worse
state.set( 'data[' + state.get( 'data.length' ) + ']', { foo: 'bar' });

It would be much nicer to be able to use standard array mutator methods. We should wrap those methods so that a call to push is equivalent to the above.

...a la Backbone models

Possibly a bit blue-sky, but this syntax would be neat:

state.compute( 'width', '<% x2 %> - <% x1 %>' );

// as opposed to
state.compute( 'width', {
  triggers: [ 'x1', 'x2' ],
  fn: function ( x1, x2 ) {
    return x2 - x1;
  }
});

Probably best to use different delimiters, to avoid confusion with templating languages.

At any rate, something like this would be very compact and fairly straightforward to a) identify dependencies, and b) compile to a function.

This would come in handy:

state.observe( keypath1, keypath2, function ( value1, value2 ) { /*...*/ });

// or
state.observe( [ keypath1, keypath2 ], function ( value1, value2 ) { /*...*/ });

It would be great(possibly hard to implement) to have a way of defining observer function over coupled keypaths and make it react only when all of the defined keypaths have been changed. Lets say

sm.observe(['keypath1', 'keypath2'], function () {
  // both keypaths changed
});

It would make sense to flatten data and cache it where possible, rather than doing a graph traversal each time

Statesman instances (Statesmen?) should emit events when data changes. Some useful events:

• set
• change
• delete/remove