Reactive arrays

[sachalifs]

I have a property set to an array and I want to be able to get its length attribute on the template. Is that possible using ripplejs/ripple standalone or using any plugin?

My code looks like the following:

var ripple = require('ripple');
var template = '<div>{{items.length}}</div>';
var View = ripple(template);

View.attr('items', {type: 'array'});

View.on('ready', function(view) {
  setTimeout(function () {
    view.get('items').push(1); // does not update the template
  }, 1000);
});

var view = new View({items: [10, 20, 30, 0, 4]});

view.appendTo(document.body);

[chrisbuttery]

I was able to get it working by tweeking a few things

var ripple = require('ripple');
var template = '<div>{{items.length}}</div>';
var View = ripple(template);

View.on('created', function(view){
  setTimeout(function () {
    view.data.items.push(50); // add a new val
    view.set('items', view.data.items); // set the new data
  }, 1000);
});

var view = new View({
  data: {
    items: [10, 20, 30, 0, 4]
  }
});

view.appendTo('body');

[sachalifs]

@chrisbuttery but you have to view.set() the items every time you update it, that was the weird thing I noticed. Isn't there any other way to work around this with arrays?

[anthonyshort]

I intentionally left out doing any watching with arrays, just because it comes with so many weird cases it adds a lot of scope creep and bloat. Like, should we be able to watch items in the array? What if items in the array are moved around?

For simple values like in the example, setting it will work fine. But when it's an array of views it's trickier. I was working on having this functionality in a plugin: https://github.com/ripplejs/list but I didn't get around to finishing it.

I'm happy to take on any suggestions to make iteration better though.