2016-08-18 8 views
0

CanJSを初めて使い、一般的なコーディングにはかなり新しくなっています。CanJS - .stacheファイル内に定義されたviewModelへのアクセス

stuckファイルのviewModelから 'countries'プロパティにアクセスしたいとします。私はガイドとしてチュートリアルを使用しようとしていたし、うまくいけば、私は再びそれを通過するように、より良い理解を得る。しかし、私はプラグインがどのように動作しているのか、それが何をしているのかよく分かりません。

私のコードはチュートリアルのコードと同じように見えますが、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}} 
:ここに私のファイルがあります3210

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

問題ありません、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

関連する問題