Accessing viewModel in .stache file with define

CanJS
1

Hey all,

I’m new to CanJS and fairly new to coding in general, so please bear with me.

I want to access a ‘countries’ property inside my viewModel in a stache file. I’ve been trying to use the tutorial as a guide and hopefully gain a better understanding as I go through it again. But I’m not quite sure how the ‘define’ plugin works or what it’s doing.

As far as I can see, my code seems the same as that in the tutorial, but it never gets into countries.get and I can’t access the data I want it to return. (countries.json contains an array of js objects). Here are my files:

country.js

var Country = can.Model.extend({
  findAll: 'GET /api/countries'
}, {});
```
fixtures.js
```
can.fixture('GET /api/countries', 'models/countries.json', function() {
  console.log("in fixture");
});
```
medal_list.js
```
var MedalListViewModel = can.Map.extend({
  define: {
    countries: {
      get: function() {
        console.log("in countries");
        return Country.findAll({});
      }
    }
  }
});

can.Component.extend({
  tag: 'medal-list',
  template: can.view('components/medal_list/medal_list.stache'),
  viewModel: MedalListViewModel
});
```

medal_list.stache
```
<div>

{{#if countries}}
  {{#each countries}}
  <p>country</p>
  {{/each}}
{{else}}
  <p>no countries</p>
{{/if}}

</div>
```

index.js
```
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>Olympic Medals Stats</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
  </head>
  <body>
    <!-- CanJS application root -->
    <div id="can-main"></div>
    
    <script src="libs/jquery.js"></script>
    <script src="libs/can.custom.js"></script>
    <script src="libs/can.fixture.js"></script>
    <script src="models/country.js"></script>
    <script src="models/fixtures.js"></script>
    <script src="components/medal_list/medal_list.js"></script>
    <script src="app.js"></script>
  </body>
</html>
```
2

Here’s a couple of things I noticed that might be related. When you use a promise in a stache template, you can access the value that the promise resolves to using promiseName.value. See https://canjs.com/docs/can.stache.html “Working with Promises” section.

Also, I think you need to include the define plugin for it to be used. Not sure if you have that or not in your can.custom.js.