0

私は単純な Ember CRUD アプリに取り組んでおり、「表示」テンプレートを「編集」テンプレートと交換する際に問題が発生しました。これが私のルート設定です：

App.Router.map(function(){ //map URLs to templates
   this.resource('contacts',{path: '/contacts'}, function(){
       this.resource('contact', {path: '/contact/:contact_id'}, function(){
           this.route('edit');
           this.route('create');
           this.route('delete');
       });
   });
});

次のテンプレートは私のモデルを表示します。link-to で表示テンプレートを編集テンプレートに置き換えたい:

<script type="text/x-handlebars" data-template-name="contact">
        <h3>{{ firstName }} {{ lastName }}</h3>
        <h4>Contact Details</h4>
            {{ email }} 
        <br/>
        {{ phone }}
        <br/>
        {{#link-to "contact.edit" this}}edit{{/link-to}}
</script>

残念ながら、ユーザーが をクリックする#link-to "contacdt.edit"と、ビューは {{outlet}} でレンダリングされます (デバッグ用に {{outlet}} を追加しただけです)。編集テンプレートも現在のモデルに正しくバインドされていないようです。

完全な例については、このjsfiddleを参照してください。

4

1 に答える 1

4

デフォルトでは、テンプレートは親テンプレートのメイン アウトレットでレンダリングされます。ルート階層のため、テンプレートにcontact.editはcontact親テンプレートがあります。contactsそして、テンプレート内でレンダリングする必要があります。

renderTemplateからメソッドをオーバーライドしてApp.ContactEditRoute、目的の動作を得ることができます。

App.ContactEditRoute = Em.Route.extend({
    model: function (params) {
        return this.store.find(App.Contact, params.contact_id);
    },
    actions: {
        save: function () {
            var newContact = this.modelFor('contact.edit');
            this.transitionTo('contact', newContact);
        }
    },
    renderTemplate: function() {
        this.render('contact.edit', { into: 'contacts' })
    }
});

これはテンプレート レンダリングのドキュメントですhttp://emberjs.com/guides/routing/rendering-a-template/

これが更新されたコードのフィドルですhttp://jsfiddle.net/marciojunior/y58vB/

于 2013-10-25T22:35:09.700 に答える