1

次のコードを考えると、person.indexルートとネストされたperson.finishルートは、空/未定義であるため、PersonController content / modelプロパティを使用すると思いましたか？私は何が間違っているのですか？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>
4

2 に答える 2

1

ビューは、Emberが生成したコントローラー、または定義したコントローラーのいずれかを介しPersonIndexControllerて提供され、直面している問題の原因となりました。元の例にパッチを適用して機能させる代わりに、Emberjs機能を活用するためにビュー/ルートを構造化する方法を示すために再作成しました。

アプリケーション/例は、相互に動作および通信し、ルーターマップにキャプチャされた一連の状態として設計する必要があります。あなたの例では、対応するビューとコントローラーを備えたpeople、personリソースとfinishルートが必要です。明示的に作成するか、Emberにそれを任せて、その規則に従っていることを条件とします。

これが実際の例であり、以下で例の最も重要な部分のいくつかを強調しました

<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'
        })
    }
})
于 2013-01-28T06:00:26.260 に答える
1

これはルーターで使用できます。 

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

あなたの代わりに：

controller.set('content', this.controllerFor('person'));
于 2013-02-13T14:08:37.023 に答える