Учитывая следующий код, я думал, что в маршрутах person.index и nested person.finish будет использоваться свойство содержимого / модели PersonController, поскольку их значения были пустыми / неопределенными? Что я делаю не так? http://jsfiddle.net/EasyCo/MMfSf/5/

Чтобы быть более кратким: когда вы нажимаете на идентификатор, {{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>
1
EasyCo 28 Янв 2013 в 01:37

2 ответа

Лучший ответ

Вы можете использовать это в своем роутере:

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

Вместо твоего

controller.set('content', this.controllerFor('person'));
1
xamenrax 13 Фев 2013 в 14:54

Ваши представления обслуживались через разные контроллеры, либо сгенерированный 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'
        })
    }
})
1
ken 28 Янв 2013 в 06:14