Help with Migration from Canjs 2 > 3

CanJS
1

Hi there,

I’ve just started to migrate a canjs 2 app to use canjs 3. I’ve come across an issue and perhaps someone can help.

I have a simple table defined in the template with a list of things (this is just a test app)

  {{#each things}}
    <tr {{data 'thing'}} class="thing">
      <td>{{name}} <span class="label label-danger pull-right delete">X</span></td>
    </tr>
  {{/each}}

the delete leads to code like this in the component

'.delete click': function(el, ev) {
  var thing = $(el).closest('tr').data('thing');
  thing.destroy();
}

Now, it seems like data(‘thing’) doesn’t work like it used to as the value of thing is undefined. Any advice on how this should be done now?

Cheers

Rob

2

use http://canjs.com/doc/can-util/dom/data/data.get.html

var domData = require("can-util/dom/data/data");


...
  var thing = domData.get.call( $(el).closest('tr')[0], 'thing') );
1 Like
3

Hello Justin,

Many thanks. Just wondering, is there meant to be a ‘better’ way to do this type of thing in canjs 3 now?

Rob

4

@robfoweraker You could probably use call expresssions to do this.

 {{#each things as thing}}
    <tr class="thing">
      <td>{{thing.name}} <span class="label label-danger pull-right" ($click)="delete(thing)">X</span></td>
    </tr>
  {{/each}}

and in your view model:

 //....

    delete: function(thing){
        var index = this.things.indexOf(thing);
        this.things.splice(index, 1);
    }
///...
3 Likes
5

@roemhildtg - Thanks for the suggestion, I will give that a try!