Question

我查看了堆栈溢出但未找到任何令人满意的答案。这是我的问题。

我有一个非常简单的应用程序，我正在使用EmberJS进行练习。这是一个费用跟踪应用程序，基本上有3个部分：“朋友”，“费用”和“摘要”，如屏幕截图所示。

Index Page with 3 tabs

“朋友”和“费用”部分正在按预期工作。它们允许我浏览存储的朋友并输入新的朋友。与费用标签相同。

但我无法让摘要页面正常工作。我已经为每个控制器（即friendsController，expensesController）包含了下面的代码。请告诉我如何从费用模型中访问信息并将其显示在摘要选项卡中。万分感谢！

    App.FriendsController = Ember.Controller.extend({
    isEditing: false,       
  actions: {
    add_friend: function() {
        this.set('isEditing',true);
    },

    cancel: function() {
        this.set('isEditing',false);
    },

    addFriend: function(){
        var name = this.get('name');
        var scrName = this.get('screenName');
        var description = this.get('description');

        var newFriend = this.store.createRecord('friend', {
            name: name,
            screenName: scrName,
            description: description
        });

        this.set('name','');
        this.set('screenName','');
        this.set('description','');

        newFriend.save();
        this.set('isEditing',false);
    },

  }

});

App.ExpensesController = Ember.Controller.extend({
    isEditing: false,

    actions: {
        add_expense: function() {
            this.set('isEditing', true);
        },

        cancel: function() {
            this.set('isEditing',false);
        },

        addExpense: function(){
        var date = this.get('date');
        var description = this.get('description');
        var whoPaid = this.get('whoPaid');
        var amount = this.get('amount');
        var forWhom = this.get('forWhom');

        if(!date.trim()) { return; }
        if(!description.trim()) { return; }
        if(!whoPaid.trim()) { return; }
        if(!amount.trim()) { return; }
        if(!forWhom.trim()) { return; }

        var newExpense = this.store.createRecord('expense', {
            date: date,
            description: description,
            whoPaid: whoPaid,
            amount: amount,
            forWhom: forWhom
        });

        this.set('date','');
        this.set('description','');
        this.set('whoPaid','');
        this.set('amount','');
        this.set('forWhom','');

        newExpense.save(); 


    }
  }
});

申请模板：

<script type="text/x-handlebars">
    <div class="container content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <h2>{{#linkTo 'index'}}Expense Tracker{{/linkTo}}</h2>
            </div>
            <hr>
            <div class="nav well col-md-12 master">
                <ul>
                    <li>{{#linkTo 'friends'}}Friends{{/linkTo}}</li>
                    <li>{{#linkTo 'expenses'}}Expenses{{/linkTo}}</li>
                    <li>{{#linkTo 'summary'}}Summary{{/linkTo}}</li>
                </ul>
            </div>
            <div class="well col-md-12 detail">

                    {{outlet}}

            </div>
        </div>
    </div>
</script>

朋友模板：

<script type="text/x-handlebars" id="friends">
    {{#if isEditing}}
        {{partial newFriend}}
        <p>
            <button {{action 'cancel'}} class="btn btn-success">Cancel</button>
            <button {{action 'addFriend'}} class="btn btn-info">Save</button>
        </p>
    {{else}}
        <p><button {{action 'add_friend'}} class="btn btn-primary">(+) New Friend </button></p>
    {{/if}}
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Screen Name</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {{#each model}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{screenName}}</td>
                    <td>{{description}}</td>
                    <td>
                        <button action 'delete_friend' class="btn btn-danger">Delete</button>                   
                    </td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

朋友部分模板（允许输入新朋友）：

<script type="text/x-handlebars" id="_newFriend">
    <p> Add New Friend </p>
    <table class="table table-bordered">
        <tr>
            <td><label for="name">Name: </label></td>
            <td>{{input type="text" value=name id="name"}}</td>
        </tr>
        <tr>
            <td><label for="screenName">Screen Name: </label></td>
            <td>{{input type="text" value=screenName id="screenName"}}</td>
        </tr>
        <tr>
            <td><label for="description">Description: </label></td>
            <td>{{input type="text" value=description id="description"}}</td>
        </tr>
    </table>
</script>

费用模板：

<script type="text/x-handlebars" id="expenses">
    {{#if isEditing}}
        {{partial newExpense}}
        <p>
            <button {{action 'cancel'}} class="btn btn-success">Cancel</button>
            <button {{action 'addExpense' 'addSummary'}} class="btn btn-info">Save</button>
        </p>

    {{else}}
        <p><button {{action 'add_expense'}} class="btn btn-primary">(+) New Expense </button></p>
    {{/if}}
    <table class="table table-bordered table-striped">
        <thead>
            <tr>

                <th>Date</th>
                <th>Description</th>
                <th>Who paid?</th>
                <th>Amount</th>
                <th>For whom?</th>
            </tr>
         </thead>
        <tbody>
            {{#each model}}
                <tr>
                    <td>{{date}}</td>
                    <td>{{description}}</td>
                    <td>{{whoPaid}}</td>
                    <td>{{amount}}</td>
                    <td>{{forWhom}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

支出部分模板（允许新费用）：

<script type="text/x-handlebars" id="_newExpense">
    <p> Add New Expense </p>
    <table class="table table-bordered">
        <tr>
            <td><label for="date">Date: </label></td>
            <td>{{input type="date" value=date id="date"}}</td>
        </tr>
        <tr>
            <td><label for="description">Description: </label></td>
            <td>{{input type="text" value=description id="description"}}</td>
        </tr>
        <tr>
            <td><label for="whoPaid">Who Paid: </label></td>
            <td>{{input type="text" value=whoPaid}}</td>

            </td>
        </tr>
        <tr>
            <td><label for="amount">Amount: </label></td>
            <td>{{input type="text" value=amount id="amount"}}</td>
        </tr>
        <tr>
            <td><label for="forwhom">For Whom: </label></td>
            <td>{{input type="text" value=forWhom id="forwhom"}}</td>
        </tr>
    </table>
</script>

摘要模板：

<script type="text/x-handlebars" id="summary">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Total Expenses</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>{{name}}</td>
                <td>{{totalExpenses}}</td>
            </tr>

        </tbody>
    </table>
</script>

Answer 1

在路线模型方法中，您可以查询其他路线的模型，例如：

App.SummaryRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('friends');
    }
});

因此，在摘要控制器中，您可以使用this.get('model')

访问好友

如果您需要返回多个承诺，则需要使用Ember.RSVP.hash：

App.SummaryRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({
            friends: this.store.find('friend'),
            expenses: this.store.find('expense'),
        }).then(function(data) {
            var friends = data.friends,
                expenses = data.expenses;

            // calculate the totalExpenses ...

            // Fixed for simplicity
            return { name: 'foo', totalExpenses: 12 }
        });
    }
});

因此，在摘要控制器中，您可以使用this.get('model.friends')和费用this.get('model.expenses')访问好友。

如果您的路由器结构中子路由需要从父路由访问模型，例如：

App.Router.map(function() {
  this.resource('parent', function() {
    this.route('child');
  });
});

在子路线中，您将能够使用modelFor('parent')，因为父路线已经解析了您的模型，例如：

App.ChildRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('parent')
  }
})

在Ember中共享模型之间的数据

1 个答案: