Emberjs에서 이벤트 오류를 ​​처리하지 못했습니다.

Question

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 페이지의이야 내 App.js 잘못하고있을 수도 있고 내가해야 무엇

<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> 

다른 속성을 사용하여 JSON 응답을 필터링 할 수 있습니까?

Answer 1

IndexController에서 마지막으로 속성을 Computed Property으로 선언했지만 {{action}} 도우미를 사용하려는 경우에는 허용되지 않습니다. 이것은 단순한 기능입니다. 그렇기 때문에 Ember는 어디서나 적절한 이벤트를 찾지 못하고 불만을 토로합니다.

1. 나는 일반 함수로 계산 된 속성을 변경 :

   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> 
   

   그래서 나는 기본적으로 두 가지를했다.
2. 템플릿이 내용 대신 filteredContent를 반복합니다. (초기화는 컨트롤러에서해야합니다.)

소 기본적으로 필터링 된 내용을 보유하고있는 컨트롤러에 추가 속성이 있습니다. 당신은 유스 케이스가 좀 더 복잡하기 때문에 이것을 확장해야합니다. :-)