Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber Data nested Models
    text
    copied!<p>I'm using EmberJs and Ember-Data in a Google App Engine project which uses NDB. In the database I have Host, Probe and Check entities. The database model doesn't really matter as long as I have my REST api in order but for clarity here are my database Classes:</p> <pre><code>class Host(ndb.Model): hostName = ndb.StringProperty() hostKey = ndb.Key('Host', 'SomeHostId') class Probe(ndb.Model): checkName = ndb.StringProperty() probeKey = ndb.Key('Host', 'SomeHostId', 'Probe', 'SomeProbeId') class Check(ndb.Model): checkName = ndb.StringProperty() checkKey = ndb.Key('Host', 'SomeHostId', 'Probe', 'SomeProbeId', 'Check', 'SomeCheckId') </code></pre> <p>I've added the keys in order to show that each host has some probes running on them and each probe performs some checks.</p> <ul> <li>Host <ul> <li>Probe <ul> <li>Check</li> </ul></li> </ul></li> </ul> <p>In my App.Js I have defined the following models:</p> <pre><code>App.Host = DS.Model.extend({ hostName: DS.attr('string') probes: DS.hasMany('probe',{async:true}) }); App.Probe = DS.Model.extend({ host: DS.belongsTo('host'), probeName: DS.attr('string') checks: DS.hasMany('check',{async:true}) }); App.Check = DS.Model.extend({ probe: DS.belongsTo('probe'), hostName: DS.attr('string') }); </code></pre> <p>I have defined the following router:</p> <pre><code>App.Router.map(function() { this.resource('hosts', function(){ this.resource('host', { path:':host_id'}, function(){ this.resource('probes', function(){ this.resource('probe', { path:':probe_id'}, function(){ this.resource('checks', function(){ this.resource('check', { path:':check_id'}, function(){ }); }); }); }); }); }); }); </code></pre> <p>And in AppEngine if have built the following URL paths:</p> <pre><code>app = webapp2.WSGIApplication([ ('/', MainHandler), webapp2.Route('/hosts', HostsHandler), webapp2.Route('/hosts/&lt;hostId&gt;/', HostHandler), webapp2.Route('/hosts/&lt;hostId&gt;/probes', ProbesHandler), webapp2.Route('/hosts/&lt;hostId&gt;/probes/&lt;probeId&gt;/checks', ChecksHandler), webapp2.Route('/hosts/&lt;hostId&gt;/probes/&lt;probeId&gt;/checks/&lt;checkId&gt;/', CheckHandler) ]) </code></pre> <p><a href="http://example.com/hosts">http://example.com/hosts</a> returns:</p> <pre><code>{ "hosts": [ { "hostName": "SomeHostName1", "id": "SomeHostId1" }, { "hostName": "SomeHostName2", "id": "SomeHostId2" } ] } </code></pre> <p><a href="http://example.com/hosts/SomeHostId1/probes">http://example.com/hosts/SomeHostId1/probes</a> returns:</p> <pre><code>{ "probes": [ { "probeName": "SomeProbeName1", "id": "SomeProbeId1", "host_id": "SomeHostId1" }, { "probeName": "SomeProbeName2", "id": "SomeProbeId2", "host_id": "SomeHostId1" } ] } </code></pre> <p><a href="http://example.com/hosts/SomeHostId1/probes/SomeProbeId1/checks">http://example.com/hosts/SomeHostId1/probes/SomeProbeId1/checks</a> returns:</p> <pre><code>{ "checks": [ { "checkName": "SomeCheckName1", "id": "SomeCheckId1", "probe_id": "SomeProbeId1" }, { "checkName": "SomeCheckName2", "id": "SomeCheckId2", "probe_id": "SomeProbeId1" } ] } </code></pre> <p>My templates are:</p> <pre><code>&lt;script type="text/x-handlebars" id="host"&gt; &lt;h3&gt;{{hostName}}&lt;/h3&gt; {{#link-to 'probes' probes}}probes{{/link-to}} {{outlet}} &lt;/script&gt; &lt;script type="text/x-handlebars" id="probes"&gt; {{#each probe in probes}} Probe: {{probe.probeName}} {{#link-to 'checks' probe.checks}}checks{{/link-to}} {{/each}} {{outlet}} &lt;/script&gt; &lt;script type="text/x-handlebars" id="checks"&gt; {{#each check in checks}} Check: {{check.checkName}} {{/each}} &lt;/script&gt; </code></pre> <p>Now I have all this... but no clue how to tie it up together so that Ember-Data makes the right http requests. So far I've only seen request go to <a href="http://example.com/modelName/">http://example.com/modelName/</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload