These are chat archives for canjs/canjs

30th
May 2016
Dovid Bleier
@dbleier
May 30 2016 20:01

I have the following component with VM:

export const ViewModel = Map.extend({
      define: {
          schedule: {
              type: 'string'
          },
        days: {
            get(last) {
                if(last) {
                    return last;
                }

                if(this.attr('schedule')) {
                    var DaysMap = Map.extend({
                        define: {
                            'Sunday': {
                                type: 'boolean',
                                value: false
                            },
                            'Monday': {
                                type: 'boolean',
                                value: false
                            },
                            'Tuesday': {
                                type: 'boolean',
                                value: false
                            },
                            'Wednesday': {
                                type: 'boolean',
                                value: false
                            },
                            'Thursday': {
                                type: 'boolean',
                                value: false
                            },
                            'Friday': {
                                type: 'boolean',
                                value: false
                            },
                            'Saturday': {
                                type: 'boolean',
                                value: false
                            },
                        }
                    }),
                    selectedDays = this.attr('schedule')
                                    .match(/[F,M,S,T,W].+day,?/)[0]
                                    .split(', '),
                    days = new DaysMap();
                    selectedDays.forEach(function (d) {
                        days.attr(d, true);
                    });
                    return days;
                }

                return (Map.extend({
                    define: {
                        'Sunday': {
                            type: 'boolean',
                            value: true
                        },
                        'Monday': {
                            type: 'boolean',
                            value: true
                        },
                        'Tuesday': {
                            type: 'boolean',
                            value: true
                        },
                        'Wednesday': {
                            type: 'boolean',
                            value: true
                        },
                        'Thursday': {
                            type: 'boolean',
                            value: true
                        },
                        'Friday': {
                            type: 'boolean',
                            value: true
                        },
                        'Saturday': {
                            type: 'boolean',
                            value: true
                        }
                    }
                })());

            },
            set(val) {
                return val;
            }
        },
        startTime: {
            type: 'string',
            get(last) {
                if(last) {
                    return last;
                }

                if(this.attr('schedule')) {
                    var st = this.attr('schedule').match(/[1-2]?[0-9]:\d{2}:\d{2}?/);
                    return st ? st[0] : '';
                }

                return '';

            },
            set(newval) {
                return newval ? Date.create(newval).format('{H}:{mm}:{ss}') : '';
            }
        },
        compiled: {
            type: 'string',
            get() {
                var days = this.attr('days'), 
                selectedDays = Map.keys(days).filter(function(k) {
                    return days.attr(k) === true;
                }).join(', '),
                compiled = ' on ' + selectedDays 
                + (this.attr('startTime') ? ' at ' + this.attr('startTime') : '');
                this.attr('schedule', compiled);
                return compiled;
            }
        }
      },
});

and stache

<h4>Scheduling</h4>
<div id="compiledExpression">
    <strong>Presentation Scheduled: {{compiled}}<br/>
    <div id="weekly" >
               <input type="checkbox" {($checked)}="days.Sunday" /> Sunday
              <input type="checkbox" {($checked)}="days.Monday" /> Monday
              <input type="checkbox" {($checked)}="days.Tuesday" /> Tuesday
              <input type="checkbox" {($checked)}="days.Wednesday" /> Wednesday
              <input type="checkbox" {($checked)}="days.Thursday" /> Thursday
              <input type="checkbox" {($checked)}="days.Friday" /> Friday
              <input type="checkbox" {($checked)}="days.Saturday" /> Saturday
            <br/><br/>
            Start: <input type="text" {($value)}="startTime" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?" placeholder="hh:mm(:ss)"/>            
            <br/><br/>
    </div>
when I click on the checkboxes, the first time it DOES call the compiled compute but after that clicking on any of the checkboxes does NOT cause compiled to recompute
even though it does update the days map
how can I get compiled to recompute everytime a checkbox is checked/unchecked? Why isn't this.attr('days') enough to cause recompute?
Paul Tichonczuk
@tracer99
May 30 2016 20:05
Trying to load a stache file into a component loaded in a CanJS 2.2.6 project
When importing a stache template, I get a "Illiagal module name" error
I'm assuming it's from the ext entry in stealconfig.js where stache is mapped to "can/view/stache/system"