Question

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

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

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({});
??????

由于

Answer 1

我的问题是我无法获得正确的路线和模板名称。我是否像这样做一个巨大的嵌套路由器地图（无法让它工作）？

是的，你有正确的想法。有时这种嵌套级别没有意义，但在你的情况下它是一个很好的选择，因为你真的想要在你的应用程序中嵌套这个级别ui。只有改变是我会通过将路径设置为'/'来确定帐户和交易。

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

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

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

至少我认为这是正确的，很容易弄乱命名约定。如有疑问，请尝试将以下内容添加到您的应用程序配置中：

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

通过这种方式，您可以看到Ember正在使用什么并修复任何名称不正确的内容。

我也想利用Ember“partial”来编辑这个交易。

我建议改用其他路线。

在EmberJS中，如何在父布局中组织模板，以及如何定义其路径？

1 个答案: