Question

我是CanJS的新手，对于一般的编码还是比较新的，所以请耐心等待。

我想从stache文件中的viewModel访问'countries'属性。我一直在尝试使用本教程作为指导，并希望在我再次通过它时获得更好的理解。但我不太确定'define'插件是如何工作的，或者它正在做什么。

据我所知，我的代码与教程中的代码相同，但它永远不会进入countries.get，我无法访问我希望它返回的数据。（countries.json包含js对象的数组）。这是我的文件：

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}}

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>

用尽可能少的行话，任何人都可以告诉我我做错了什么和/或解释究竟是什么定义的？感谢。

Answer 1

没问题，Country.findAll({});返回延迟（AKA承诺），stache模板可以像这样处理它：

{{#if countries.isPending}}
   <h3>Loading countries</h3>
{{else}}
  {{^if country.length}}
     <p>no countries</p>
  {{else}}
    {{#each countries.value}}
      <p>{{name}}</p>
      <p>{{code}}</p>
     {{/each}}
  {{/if}}
{{/if}}

可以在文档中找到更多示例：https://canjs.com/docs/can.Map.prototype.define.html

CanJS - 使用.stache文件中的define访问viewModel

1 个答案: