Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 14 21:13
    greenkeeper[bot] labeled #5378
  • Oct 14 21:12
    greenkeeper[bot] opened #5378
  • Oct 14 21:12

    greenkeeper[bot] on can-simple-map-4.3.3

    fix(package): update can-simple… (compare)

  • Oct 14 20:19
    greenkeeper[bot] labeled #5377
  • Oct 14 20:19
    greenkeeper[bot] opened #5377
  • Oct 14 20:19

    greenkeeper[bot] on @feathersjs

    chore(package): update @feather… (compare)

  • Oct 14 20:18
    greenkeeper[bot] labeled #5376
  • Oct 14 20:18
    greenkeeper[bot] opened #5376
  • Oct 14 20:18

    greenkeeper[bot] on @feathersjs

    chore(package): update @feather… (compare)

  • Oct 14 14:43
    greenkeeper[bot] closed #5373
  • Oct 14 14:43

    greenkeeper[bot] on can-deep-observable-1.0.1

    (compare)

  • Oct 14 14:42

    m-mujica on update-deep-observable

    (compare)

  • Oct 14 14:42

    m-mujica on master

    Update can-deep-observable to l… Merge pull request #5374 from c… (compare)

  • Oct 14 14:42
    m-mujica closed #5374
  • Oct 14 14:42
    m-mujica closed #5365
  • Oct 14 14:09
    f-ricci starred canjs/canjs
  • Oct 14 13:55
    greenkeeper[bot] commented #5375
  • Oct 14 13:55

    greenkeeper[bot] on core-js-3.3.2

    chore(package): update core-js … (compare)

  • Oct 14 10:51
    m-mujica review_requested #5374
  • Oct 14 07:43
    rjgotten commented #5358
Jim O'Harra-Sutton
@Psykoral
Ah OK, let me try that
Brad Momberger
@bmomberger-bitovi
A more generalized form might put B in A as a property:
var B = new DefineMap({ bar: "some string" });
var AC = DefineMap.extend({ b: {}, foo : { get() { return this.b.bar } } });
var A = new AC({ b: B });
A.on("foo", function() {});
This is analogous to A being a view model, and containing B as a data model.
Jim O'Harra-Sutton
@Psykoral
cool, I've got some other errors to dig through but I think that worked
thanks again!
Brad Momberger
@bmomberger-bitovi
You're welcome. Good luck with your other errors.
Jim O'Harra-Sutton
@Psykoral
Do I have to specifically use a setter in order to make the getters "listen and react" to the changed value?
Brad Momberger
@bmomberger-bitovi
No. Setters can be used for translating inputs or other side effects, but they're not strictly necessary. You can have a getter without a setter.
Jim O'Harra-Sutton
@Psykoral
because right now, based on your sample above as reference, I'm just setting B.bar = null and B.bar = 'a thing' and thought that would be enough to make the getters do their updates
Brad Momberger
@bmomberger-bitovi
It should be. Do you see the getter effect happen when you read A.foo directly?
Jim O'Harra-Sutton
@Psykoral
my eqiv of A.foo is in a stache, so no that HTML isn't showing when I change the value of B.bar
Brad Momberger
@bmomberger-bitovi
OK. so if B is a DefineMap, was B.bar defined on its prototype OR present on the argument when B was instantiated?
This is important because we do all the live listening and side effect stuff on DefineMaps using JavaScript property definitions. It may or may not surprise you to know, that DefineMap can't act on properties it hasn't been informed about.
B = new DefineMap({ bar: "baz" });  // ok, on init we look at all the properties passed in
B = new (DefineMap.extend({ bar: "string" ))(); // ok, was defined on the prototoype
B = new DefineMap(); B.set("bar", "baz");  // ok.  set can set up the listeners.
B = new DefineMap(); B.bar = "baz";  // not ok.
Jim O'Harra-Sutton
@Psykoral
it's defined, but it's set to null until it gets a value
yeah, it's in the DefineMap directly
Brad Momberger
@bmomberger-bitovi
OK. I think there's something else going on here but I can't say what with the information provided. Possibly your Stache is looking at a different object than the one you intended.
Jim O'Harra-Sutton
@Psykoral
so here's my real example:
// state.js

export const AppState = DefineMap.extend({seal: false},{
  authToken: {
        type: 'string',
        value: null
    }
});

// footer.js
import AppState from '~/state';

export const ViewModel = DefineMap.extend({ seal: false },{
    loggedIn: {
        get () {
            return (AppState.authToken !== null);
        }
    },
    isAdmin: 'string',
    year: 'string'
});

// Stache:

{{#if loggedIn}}
  <li>
    <a href="{{routeUrl page='logout'}}">Logout</a>
  </li>
{{else}}
  <li>
    <a href="{{routeUrl page='login'}}">Login</a>
  </li>
{{/if}}
I'm essentially trying to get the Footer to change the link based on the state of being logged in or not
Brad Momberger
@bmomberger-bitovi
I see the problem immediately.
AppState as you have made it is a constructor class for your app state.
const AppStateClass =  DefineMap.extend({seal: false},{
  authToken: {
        type: 'string',
        value: null
    }
});
export const AppState = new AppStateClass();
Jim O'Harra-Sutton
@Psykoral
sorry, that's not all of it though, it actually exports a new AppState() that the whole app shares
Brad Momberger
@bmomberger-bitovi
OK, but your loggedIn getter is still looking at the class
Jim O'Harra-Sutton
@Psykoral

yep that's almost exactly what I have, I just still called is AppState

export default new AppState();

does that work or should I change the name and export?
Brad Momberger
@bmomberger-bitovi
ok, so the default export from state.js is new AppState() but it also exports the AppState class as a named export?
Jim O'Harra-Sutton
@Psykoral
yeah I'm probably confusing it with that, I've changed it to AppStateClass () to avoid that, good call
Brad Momberger
@bmomberger-bitovi
OK. I would definitely still check it from the console and see if all the values in the model and viewmodel are correct.
Do you know the tricks for getting access to modules in the dev console?
Jim O'Harra-Sutton
@Psykoral
not exactly but I do have a debugger setup that I can turn on that'll spit out values at the right times so I can tell what they are
Brad Momberger
@bmomberger-bitovi
For any project using Steal as its dependency manager, you can use e.g. System.import('~/state').then(c => window.AppState = c.default }) to export the default export of state.js to the window.
If instead you're doing a global build with steal-tools, all of your modules are hosted in window._define.modules
Brad Momberger
@bmomberger-bitovi
So if you're logged in, the default export of state.js should have a non-null authToken and if you get the canViewModel() function from System.import('can-view-model'), calling it on your footer component element (canViewModel("my-footer") if your footer component tag is called "my-footer") will show you the instance of the ViewModel class that was created for it.
You can then check the value of loggedIn on that ViewModel instance
Jim O'Harra-Sutton
@Psykoral
sorry, I think I broke something in my session.js with that name change
Brad Momberger
@bmomberger-bitovi
Interesting.
I'm wondering if session.js was operating on the wrong object.
Jim O'Harra-Sutton
@Psykoral
I guess it was, which is weird.... because it was totally working lol
Brad Momberger
@bmomberger-bitovi
Jim O'Harra-Sutton
@Psykoral
// session.js

import AppState from '~/_app/js/state';
console.log('AppState',AppState);

AppState undefined
lol yeah exactly.
Brad Momberger
@bmomberger-bitovi
And you definitely have a default export in state.js?
Jim O'Harra-Sutton
@Psykoral
yep, but should it be something other than AppState?
export const AppState = new AppStateClass();
export default AppState;
Brad Momberger
@bmomberger-bitovi
That should work fine.
Though you could also try import {AppState} from '~/_app/js/state'; just for shits and giggles.
(that syntax imports the named export instead of the default)
The one other possibility is that these files have a circular dependency. Steal resolves that by initially letting circular deps be undefined, then letting the scripts create their exports.
Which means you can still use imports from a circular dependency, but not synchonously.