These are chat archives for canjs/canjs

15th
Jan 2019
apsignifi
@apsignifi
Jan 15 15:40
Thanks. will review.
apsignifi
@apsignifi
Jan 15 15:58
@chasenlehara : You were right, I think once I make the update for working with 'inserted' - it'll probably work. Thanks again !
apsignifi
@apsignifi
Jan 15 16:32
once I import "can-3-4-compat/dom-mutation-events" , inserted works!
however, I want to avoid using this package since we do plan to migrate to can5 as well.
our code:
export default {
  inserted: function() { /* code to work with DataTables */ }
}

Most of what was done in the inserted event can be replaced in places like value. can-component also includes a new connectedCallback lifecycle callback that can directly replace the inserted event.

How can I use connectedCallback Or value here to replace inserted ?

Kevin Phillips
@phillipskevin
Jan 15 16:39
move that code into your viewModel
export default DefineMap.extend("VM", {
  connectedCallback() { /* code to work with DataTables */ }
});
apsignifi
@apsignifi
Jan 15 17:51
@phillipskevin : Thanks, I'll try.
Chasen Le Hara
@chasenlehara
Jan 15 18:50

🆕 We have a new community Slack! I posted about it on our forums: https://forums.donejs.com/t/you-re-invited-to-bitovi-s-community-slack/1018

The TLDR is that for people who already use Slack, this’ll be even easier than coming here on Gitter. If you haven’t used Slack before, you might like it a lot better than Gitter.

That Slack also has more topics than just Bitovi’s open source projects, so come over to talk about design, React, & more.

Anyone can join here: https://tinyurl.com/BitoviCommunitySlack

apsignifi
@apsignifi
Jan 15 19:43

@phillipskevin :

<can-component tag="data-table-new">
  <script type="view-model">
    import DefineMap from 'can-define/map/map';
    import 'can-route';
    export default DefineMap.extend({ seal: false}, {

});
<script type="events">
import platform from 'steal-platform';
import 'jquery/';
jQuery.fn.DataTable.Api.register( /* code for customizing dataTables */);
export default {
  inserted : function(){/* dataTables code */}
}
</script>

to

<can-component tag="data-table-new">
  <script type="view-model">
    import DefineMap from 'can-define/map/map';    
    import 'can-route';
        import platform from 'steal-platform';
        import 'jquery/';
        jQuery.fn.DataTable.Api.register( /* code for customizing dataTables */);
    export default DefineMap.extend({ seal: false}, {
             connectedCallback(){
/* dataTables code */
             }
});
</script>

does this look right (migrating to can4 ) ?

Kevin Phillips
@phillipskevin
Jan 15 19:46
yeah
apsignifi
@apsignifi
Jan 15 19:51

Thanks for taking a look.
do we need any changes for moving code from

script type="events"

to

script type="view-model"
Kevin Phillips
@phillipskevin
Jan 15 19:56
are you talking about moving the code from the inserted event to the connectedCallback? or something else?
apsignifi
@apsignifi
Jan 15 20:03

i did move from inserted to connectedCallback.
but it isn't working.

inserted was within <script type="events"> like I mentioned above.
I moved the contents of inserted to connectedCallback which is under <script type="view-model">.

i am trying to confirm that moving from script type events to type view-model wouldn't require any additional steps
Kevin Phillips
@phillipskevin
Jan 15 20:12
I can't think of anything else you would need to do
what isn't working?
apsignifi
@apsignifi
Jan 15 20:22
I think the issue is more related to dataTables, I'll check with you here after trying for a bit more.