2

我想要一个有两个主要模型的应用程序：帐户和交易。我想在左侧栏上有一个帐户列表。当我单击一个帐户时，我希望在页面中心列出一个交易列表。当我点击交易时，我希望该交易的详细信息出现在右侧栏上。最后但同样重要的是，当我单击编辑交易时，我想在同一个右侧栏中显示一个小的交易表单，就在交易详细信息下方。

我的问题是我无法使用正确的路线和模板名称。我是否会像这样制作一个巨大的嵌套路由器地图（无法让它工作）？我也想利用 Ember“部分”来编辑这个交易。

this.resource('accounts', function(){
    this.resource('account',{ path: ':account_id' }, function(){
        this.resource('transactions', function(){
            this.resource('transaction', {path:':transaction_id'});
        });
    });
});

如果是这样，我如何命名我的模板？

<script type="text/x-handlebars" data-template-name="application">
    <div class="main">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="accounts">
    <div class="left-bar">
        {{#each model}}
            {{#linkTo 'transactions' this}} {{name}} {{/linkTo}}
        {{/each}}
    </div>
    <div class="right-main">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="accounts/transactions">
    <div class="center">
        {{#each model}}
            {{#linkTo 'transaction' this}} {{name}} {{/linkTo}}
        {{/each}}
    </div>
    <div class="right-bar">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="accounts/transactions/transaction">
    <div class="top-transaction-detail">
        Transaction description: {{description}}<br>
        Transaction value: {{value}}
    </div>
    <div class="bottom-transaction-edit">
        {{partial 'transaction/edit'}}
    </div>
</script>

<script type="text/x-handlebars" id="transaction/_edit">
    <p>{{view Ember.TextField valueBinding='description'}}</p>
    <p>{{view Ember.TextField valueBinding='value'}}</p>
</script>

另外，我的路线是什么？

App.AccountsRoute = Ember.Route.extend({});
App.AccountsAccountTransactionsRoute = Ember.Route.extend({});
App.AccountsAccountTransactionsTransactionRoute = Ember.Route.extend({});
??????

谢谢

4

1 回答 1

1

My problem is I can't get the right routes and templates names to work. Do I do a huge nested router map like this (could not get it to work)?

Yes, you've got the right idea. Sometimes this level of nesting does not make sense but in your case it is a good fit since you actually want that level of nesting in your application ui. Only change is I would make accounts and transactions the default by setting path to '/'.

this.resource('accounts', {path: '/'}, function(){
  this.resource('account',{ path: ':account_id' }, function(){
    this.resource('transactions', {path: '/'}, function(){
        this.resource('transaction', {path:':transaction_id'});
    });
  });
});

If so, how do I name my templates?

application.hbs
accounts.hbs
accounts/index.hbs -> "choose an account" message
account.hbs -> account details
transactions.hbs -> list of transactions for the account
transactions/index.hbs -> "choose a transaction" message
transaction.hbs -> transaction details
transaction/index.hbs -> an edit button
transaction/edit.hbs -> the edit form

At least I think that's right, it's pretty easy to mess up the naming conventions. When in doubt, try adding the following to your application config:

var App = Ember.Application.create({
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

That way you can see what ember is using and fix anything that was named incorrectly.

I also would like to make use of Ember "partial" to edit this Transaction.

I'd recommend using another route instead.

于 2013-08-16T00:08:18.020 回答