访问模型的对象属性（第3级）

Question

下面是一个非常简单的应用程序，它使用句柄栏从控制器和节目中获取模型对象。我无法访问嵌套在{{foobar.foo.bar}}等属性中的属性。

的JavaScript

app = Ember.Application.create({
    rootElement: '#foo'
});

app.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('foobar', foobar);
    }
});

foobar = {
     name: 'item name',
     foo: {
         bar: 'value',
         id: 1
     }
};

HTML /车把

<div id="foo">
    <p>Name: {{foobar.name}}</p>
    <p>Name: {{foobar.foo.bar}}</p>
</div>

{{foobar.name}}有效，而{{foobar.foo.bar}}没有。有什么想法吗？

Answer 1

你的代码看起来不错。我尝试了jsfiddle（你可以随意玩它），一切都很好。你可能误导了一个财产或类似的东西 它是您的真实代码还是StackOverflow目的的简化？
在任何情况下，对于这种情况，我强烈建议您安装Emberjs Inspector Extension，这将通过查看每个属性来帮助您定位问题。

模板：

<h2>Ember.js DEMO</h2>
<script id="index" type="text/x-handlebars">
    INTERNAL : <br/>
    {{foobar}} <br/>
    {{foobar.name}} <br/>
    {{foobar.foo}} <br/>
    {{foobar.foo.bar}} <br/>
    {{foobar.foo.id}} <br/><br/>

    EXTERNAL : <br/>
    {{foobarExt}} <br/>
    {{foobarExt.name}} <br/>
    {{foobarExt.foo}} <br/>
    {{foobarExt.foo.bar}} <br/>
    {{foobarExt.foo.id}} <br/>
</script>

Javascript：

App = Ember.Application.create();

App.Router.map(function () {
    // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('foobar', {
             name: 'item name',
             foo: {
                 bar: 'value',
                 id: 1
             }
        });

        controller.set('foobarExt', externalfoobar);
    }
});

var externalfoobar = {
    name: 'item name',
    foo: {
        bar: 'value',
        id: 1
    }
};