Array push using Ractive.js

Question

I am trying to add items to an array using Ractive.js. Here is what I have...

<select value='{{selectedColumn}}'>
  {{#colNames}}
    <option value='{{this}}'>{{this}}</option>
  {{/colNames}}
</select>

<select value='{{selectedLogic}}'>
  {{#possibleLogic}}
    <option value='{{this}}'>{{this}}</option>
  {{/possibleLogic}}
</select>

<input value='{{searchVal}}'>

<button on-click='addFilter(selectedColumn, selectedLogic, searchVal)'>Add filter</button>

And in the Ractive object...

filterList = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    items: myItems,
  },
  addFilter: function (cat, log, val) {
    console.log("yo");
    items.push({
      description: cat + " " + log + " " + val,
      completed: false
    });
  }
});

Also tried calling this function with the button...

filterList.on({
  new_filter: function ( cat, log, val ) {
    console.log("hello");
    items.push({
      description: cat + " " + log + " " + val,
      completed: false
    });
  },
});

Neither approaches seem to work. The console.log()s don't even get called.

Thanks

Answer 1

Spent a little more time on it and this seems to work but perhaps it is not the best solution...

filterList.on('testFunc', function(){
  var tmp = (this.get("selectedColumn") + " " + this.get("selectedLogic") + " " + this.get("searchVal"))
  items.push({description: tmp, completed: false})
});

and the code for the button...

<button on-click='testFunc'>Add filter</button>