These are chat archives for canjs/canjs

14th
Jan 2019
apsignifi
@apsignifi
Jan 14 15:21

Can4/donejs2 migration question: in login.component, I have

el:value:bind="loginSession.user.email"

generates a warning: unable to find key loginSession.user.email.
console.log loginSession.user gives a defineMap with email = ""

Why am i getting this warning ? how can modify the syntax . etc. to fix this. ?

Kevin Phillips
@phillipskevin
Jan 14 16:24
in your template, put this right above where you're using that binding:
{{ console.log(loginSession.user) }}
apsignifi
@apsignifi
Jan 14 16:34
did that already. I get a definemap with email : ""
Kevin Phillips
@phillipskevin
Jan 14 16:34
ok, just wanted to make sure it wasn't undefined and then changing to a DefineMap
so, you should be able to avoid that warning by defining email on that type
like
var User = DefineMap.extend("User", {
  email: "string"
});
var LoginSession = DefineMap.extend("Session", {
  user: User
});
so that way even if email is an empty string, stache still knows that the type supports that property
apsignifi
@apsignifi
Jan 14 16:40
Thanks, trying it out now.
apsignifi
@apsignifi
Jan 14 16:48
that failed.

here is the full code:

<script type="view-model">
import Component from 'can-component';
import Session from 'admin/models/session';
import Users from 'admin/models/users';
import DefineMap from 'can-define/map/map';
import route from "can-route";

export default DefineMap.extend({ sealed: false },
    {
        loginSession: {
            default: function(){
                return new Session({user: new Users()});
            }
        },
        response: {
            default: ''
        },
        user: {
            get: function(val) {
                if (this.session.user) {
                    return this.session.user;
                }
                return val;
            },
        },

        createSession: function(ev) {
                if(ev) {
                    ev.preventDefault();
                }
                var self = this;
                var sessionPromise = self.loginSession.save().then(function(session){ 
                    self.loginSession = new Session({user: new Users()});
                    self.app.session = session; 

                }, function(data){
                    if(data && data.status == 403) {
                        self.response = 'Account locked please try again later';
                    }
                    else {
                        self.response = 'Invalid username or password';
                    }
                });
                this.app.sessionPromise = sessionPromise; 
            }

    });

</script>
</can-component>

<div class="form-group">{{ console.log(loginSession.user) }}
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="email" el:value:bind="loginSession.user.email" /> </div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" el:value:bind="loginSession.user.password" /> </div>
this is what I tried:
        user: {
            get: function(val) {
                if (this.session.user) {
                    return this.session.user;
                }
                return val;
            },
            email: "string",
            password: "string"
        },
Kevin Phillips
@phillipskevin
Jan 14 16:50
you Users type should have those properties
import Users from 'admin/models/users';
what does that module look like?
apsignifi
@apsignifi
Jan 14 16:53
Nice, adding the email: "string" to admin/models/users worked
export const Users = DefineMap.extend({ seal: false}, {
email: "string", //added
password: "string", //added
keyMap: {
@phillipskevin : Thanks.
Kevin Phillips
@phillipskevin
Jan 14 17:00
you're welcome
glad it worked
apsignifi
@apsignifi
Jan 14 19:46
can4 : do I need to change something (from can4) to get data-tables working in can4 ?
Chasen Le Hara
@chasenlehara
Jan 14 19:53
What is data-tables?
apsignifi
@apsignifi
Jan 14 20:05
Chasen Le Hara
@chasenlehara
Jan 14 23:04
@apsignifi What’s not working with CanJS 4?
It doesn’t look like there would be much interaction with CanJS, just initializing the jQuery plugin at some point after the table’s rendered.
If you were using the inserted event, the migration docs explain how to make them work in CanJS 4 (or replace them with connectedCallback): https://canjs.com/doc/migrate-4.html