1

我正在尝试通过在 Emberjs 中使用“filterProperty”来过滤 JSON 响应。但是我收到了这个错误，Uncaught Error: Nothing handled the event 'last'

这是我的 App.js

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    renderTemplate : function(controller) {
        this.render('MyApp', {
            controller : controller
        });
    },
    model : function() {
        return App.MyTemplateModel.find();
    }
});

App.IndexController = Ember.ArrayController.extend({
    last : (function() {
        this.get('content').filterProperty('last_name', 'Solow');
    }).property('content.@each.type')
});

App.MyTemplateModel = Ember.Model.extend({
    id : Ember.attr(),
    last_name : Ember.attr(),
    first_name : Ember.attr(),
    suffix : Ember.attr(),
    expiration : Ember.attr()
});

App.SiteController = Ember.ObjectController.extend({

});

App.MyTemplateModel.url = "http://ankur1.local/index.php/api/example/users/";
App.MyTemplateModel.adapter = Ember.RESTAdapter.create();
var existing = App.MyTemplateModel.find();
App.MyTemplateModel.camelizeKeys = true;

这是我的 HTML 页面，

<script type="text/x-handlebars" data-template-name="MyApp">

            {{#each item in content }}
            <tr><td>
            {{id}} <p> {{item.first_name}} {{item.expiration}}</p>
            </td></tr>
            {{/each}}

            <button {{action last}}>filter</button>

        </script>

        <script type="text/x-handlebars">
            <h1>Application Template</h1>
            {{outlet}}
        </script>

    </body>

我在 App.js 中可能做错了什么，还是应该使用任何其他属性来过滤 JSON 响应？

4

1 回答 1

1

您最后在 IndexController 上将属性声明为Computed Property，但是如果您想使用{{action}}帮助程序，则不允许这样做。它有一个简单的功能。这就是为什么 Ember 在任何地方都找不到合适的事件并抱怨它的原因。

App.IndexController = Ember.ArrayController.extend({
    // for initial filling of this property, will be overridden by last action
    filteredContent : Ember.computed.oneWay("content"), 
    last : function() {
        var filtered = this.get('content').filterProperty('last_name', 'Solow');
        this.set("filteredContent", filtered);
    }
});

<script type="text/x-handlebars" data-template-name="MyApp">

{{#each item in filteredContent }}
  <tr><td>
  {{id}} <p> {{item.first_name}} {{item.expiration}}</p>
  </td></tr>
{{/each}}

<button {{action last}}>filter</button>

</script>

所以我基本上做了两件事：

  1. 我将计算属性更改为普通函数。
  2. 该模板正在迭代filteredContent 而不是内容。（请注意我必须在您的控制器上进行的初始化。）

Sou 的基本机制是在你的 Controller 上有一个额外的属性，它保存过滤后的内容。您必须对此进行扩展，因为您的用例肯定会更复杂一些。:-)

于 2013-08-06T20:58:43.407 回答