0

これは私の前の質問へのフォローアップです。

ここで JSFiddle を作業します。

私のRouter基本的には次のようになります。

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.route('edit');
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

postmyとpost/edittemplateの両方を同じ にレンダリングしたいので、このため{{outlet}}に をオーバーライドしPostEditRouteました (したがって、renderTemplateこれを処理する )。のモデルmodelを使用するには、オーバーライドする必要があります。PostRoute

App.PostEditRoute = Ember.Route.extend({
    model: function() {
        return this.modelFor('post');
    },
    deactivate: function() {
        this.currentModel.get('transaction').rollback();
    },
    renderTemplate: function() {
        this.render({
            into: 'posts'
        });   
    }
});

私のpost/editテンプレートには、ビューに「リダイレクト」したいキャンセルpostリンクが含まれています。

<script type="text/x-handlebars" data-template-name="post/edit">
    {{view Em.TextField valueBinding="title"}}
    {{view Em.TextArea valueBinding="description"}}
    {{#linkTo post}}Cancel{{/linkTo}}
</script>

しかし、ここから問題が始まります。[キャンセルpost] リンクをクリックすると、テンプレートに空白の領域が表示されます。

#linkToまた、ヘルパーにパラメーターを渡すことも試みました( #linkTo post this); postテンプレートは表示されUncaught RangeError: Maximum call stack size exceededますが、 に戻るとエラーになりますpost/edit。

post私の質問:にキャンセルしたときに戻るにはどうすればよいpost/editですか?

4

2 に答える 2

0

モデルとルーターのマッピングを次のように定義します。

App.Post = DS.Model.extend({
    text: DS.attr('string'),
});

App.Router.map(function() {
    this.resource('posts');
    this.resource('post', { path: '/post/:post_id' }, function() {
       this.route('edit'); 
    });
});

resourceの呼び出しに関数を指定したのでpost、Emberはテンプレートを使用/post/:post_idしてルートに自動的にリダイレクトします（これについては公式ガイドを参照してください。ここに「show」形式を設定しましょう。App.PostIndexRoutepost/index

<script type="text/x-handlebars" data-template-name="post/index">
    <h1>Post '{{content.id}}'</h1>
    <p>text: {{content.text}}</p>    
    <p>{{#linkTo 'post.edit' content}}Edit{{/linkTo}}</p>
    <p>{{#linkTo 'posts'}}Back to index{{/linkTo}}</p>
</script>

これでpost/editテンプレートができました。

<script type="text/x-handlebars" data-template-name="post/edit">
    <h1>Editing post '{{content.id}}'</h1>
    <label>Text:</label><br/>
    {{view Ember.TextField valueBinding="content.text"}}<br/>
    {{#if content.isDirty}}
        <em>Modified.</em><br/>
    {{/if}}
    <button {{action submit}}>Submit</button>
    <button {{action cancel}}>Cancel</button>
</script>

postテンプレートは単なるアウトレットにすぎません。

<script type="text/x-handlebars" data-template-name="post">
    {{outlet}}
</script>

最後に、submitでcancelアクションを処理する必要がありPostEditControllerます。

App.PostEditController = Ember.ObjectController.extend({
    content: null,
    submit: function() {
        var post = this.get('content');
        post.get('transaction').commit();
        this.transitionToRoute('post', post);
    },
    cancel: function() {
        var post = this.get('content');
        post.get('transaction').rollback();
        this.transitionToRoute('post', post);
    },
});

これがjsfiddleです。

于 2013-03-04T07:47:29.547 に答える
0

UI がネストされている場合にのみ、リソースとルートを常にネストするのが最善であることがわかりました。

UI がネストeditさpostれていないときにネストすると、Ember と戦うことになり、問題が発生し、規則を利用できなくなります。

editview は の中に入れ子になっているので、入れ子にpostsしないeditでpostsください。

this.resource('posts', { path: '/' }, function () {
  this.route('edit', { path: '/post/:post_id/edit'});
  this.resource('post', {
    'path': '/:post_id'
  }, function () {
    this.resource('comments');
    this.resource('trackbacks');
  });
});

ルートを更新したところ、多くのボイラープレート コードを削除できました。

これが実際のフィドルです: http://jsfiddle.net/teddyzeenny/uCggc/2/

注: これは、モデル ( ) だけでなく、コントローラー全体である をヘルパーにUncaught RangeError: Maximum call stack size exceeded渡しているために発生しています。thislinkTocontent

これは Ember マスターで修正されているため、最新のビルドに更新するまでは、{{#linkTo posts.edit content}}

于 2013-03-02T12:02:17.900 に答える