EmberJS筑巢

Question

鉴于以下代码，我认为person.index和嵌套的person.finish路由将使用PersonController内容/模型属性，因为它们是空的/未定义的？我究竟做错了什么？ http://jsfiddle.net/EasyCo/MMfSf/5/

更简洁：当您点击ID时，{{id}}和{{name}}是空白的？我该如何解决这个问题？

功能

// Create Ember App
App = Ember.Application.create();

// Create Ember Data Store
App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.FixtureAdapter'
});

// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
    name: DS.attr( 'string' ),
    belts: DS.hasMany( 'App.Belt' )

});

// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
    type: DS.attr( 'string' ),
    parent: DS.belongsTo( 'App.Person' )
});

// Add Person fixtures
App.Person.FIXTURES = [{
    "id" : 1,
    "name" : "Trevor",
    "belts" : [1, 2, 3]
}];

// Add Belt fixtures
App.Belt.FIXTURES = [{
    "id" : 1,
    "type" : "leather"
}, {
    "id" : 2,
    "type" : "rock"
}, {
    "id" : 3,
    "type" : "party-time"
}];


App.Router.map( function() {
    this.resource( 'person', { path: '/:person_id' }, function() {
        this.route( 'finish' );
    });
});

// Set route behaviour
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Person.find();
  },
  renderTemplate: function() {
    this.render('people');
  }
});

模板

<script type="text/x-handlebars">
    <h1>Application</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="people">
    <h2>People</h2>
    <ul>
    {{#each controller}}
        <li>
            <div class="debug">
                Is the person record dirty: {{this.isDirty}}
            </div>
         </li>
        <li>Id: {{#linkTo person this}}{{id}}{{/linkTo}}</li>
        <li>Name: {{name}}</li>
        <li>Belt types:
            <ul>
            {{#each belts}}
                <li>{{type}}</li>
            {{/each}}
            </ul>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" id="person">
    <h2>Person</h2>
    Id from within person template: {{id}}<br><br>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="person/index">
    Id: {{id}}<br>
    Name: <a href="#" {{action  "changeName"}}>{{name}}</a><br><br>

    {{#linkTo index}}Go back{{/linkTo}}<br>
    {{#linkTo person.finish}}Go to finish{{/linkTo}}
</script>



<script type="text/x-handlebars" id="person/finish">
    <h2>Finish</h2>
    {{id}}
</script>

Answer 1

您的观点是通过不同的控制者提供的，无论是Ember生成的还是您定义的PersonIndexController，都是您所面临的问题的原因。我没有修改原始示例以使其工作，而是重新设计它以向您展示如何构建视图/路径以利用Emberjs功能。

您应该将应用程序/示例设计为一系列状态，彼此协作并在路由器映射中捕获。在您的示例中，您应该拥有people，person资源和带有相应视图和控制器的finish路径，您可以明确创建它们，也可以让Ember为您执行此操作，为您提供帮助遵循其惯例。

Here's一个工作例子，下面我重点介绍了示例中最重要的部分

<script type="text/x-handlebars" data-template-name="people">
    <h2>People</h2>
    <ul>
    {{#each  person in controller}}
        <li>
            <div class="debug">
                Is the person record dirty: {{this.isDirty}}
            </div>
         </li>
        <li>Id: {{#linkTo 'person' person}}{{person.id}}{{/linkTo}}</li>
        <li>Name: {{person.name}}</li>
        <li>Belt types:
            <ul>
            {{#each person.belts}}
                <li>{{type}}</li>
            {{/each}}
            </ul>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="person">
    <h2>Person</h2>
    Id from within person template: {{id}}<br><br>
    Id: {{id}}<br>
    Name: <a href="#" {{action  "changeName"}}>{{name}}</a><br><br>

    {{#linkTo index}}Go back{{/linkTo}}<br>
    {{#linkTo person.finish}}Go to finish{{/linkTo}}
    {{outlet}}
</script>

模型，视图，控制器和路径定义

DS.RESTAdapter.configure("plurals", { person: "people" });

App.Router.map( function() {
    this.resource('people',function() {
        this.resource('person', { path: ':person_id' }, function() {
            this.route( 'finish');
        });    
    })

});

App.PeopleController = Ember.ArrayController.extend();
App.PeopleRoute = Ember.Route.extend({
    model: function() {
        return App.Person.find();
    }
})

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('people');
    }
});
App.PersonRoute = Ember.Route.extend({
    model: function(params) {
        debugger;
        return App.Person.find(params.client_id);
    },
    renderTemplate: function() {
        this.render('person',{
            into:'application'
        })
    }
})

App.PersonFinishRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('finish',{
            into:'application'
        })
    }
})

Answer 2

您可以在路由器中使用它：

  model: function() {
    return this.modelFor("person");
  }

而不是你的：

controller.set('content', this.controllerFor('person'));