입력 상자 값을 바인딩하고 구성 요소에 전달

Question

Ember.js를 배우는 동안 막혀있는 것 같습니다.

구성 요소를 잘못 사용하고 있거나 어쩌면 작은 것을 놓칠 수도 있습니다 - 어느 쪽이든 도와주세요! 여기

는 내가 좋아하는 것이 무엇 :

• 내가
• 내가 대신 테이블을 결합 자체의 구성 요소로 입력을하고 싶은이 시스템의 테이블을 필터링하는 입력 상자. 테이블이 구성 요소 안에 있으면 훨씬 쉬워 진 것 같은 기분이 들까? 나는 가능하다면 그것들을 감추고 싶다.
  이
  1. 입력의 값은 않습니다 :
  2. 나는 또한 내가 3 데 문제가

(따라서 왜 arrangedContent 대신 모델을 사용하고 있습니다) 데이터를 정렬하는 다른 사용자 지정 구성 요소를 사용하고 있습니다 내 컨트롤러에 제대로 바인딩되지 않는 것 - 입력 상자에 무언가를 입력하면 컨트롤러에 반영되지 않는 것 같습니다. filterString 값

목록의 필터링 및 설정이 입력의 keyPress 뒤에 있으므로, 처음에는 테이블이 빈. 키를 누르기 전에 테이블을 채우려면 어떻게해야합니까?

this.set('filteredItems', items)에 대한 호출이 테이블 변경 내용을 반영하지 않습니다. propertyWillChange 및 propertyDidChange을 사용해 보았지만 여전히 운이 없습니다.

(선택 사항) 이상적으로 구성 요소 안에 filterString 및 filteredItems을 포함하는 것이 좋지만 불가능하다고 생각합니다. http://emberjs.jsbin.com/qicuq/1/edit

템플릿

<script type="text/x-handlebars" data-template-name="components/filter-input"> 
    {{input type="search" placeholder="Filter..." value=value}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    {{filter-input value=filterString}} 
    <br/> 
    <table border=1> 
    <tr> 
     <th>System Name</th> 
     <th>Owner</th> 
    </tr> 
    {{#each item in filteredItems}} 
     <tr> 
     <td>{{item.name}}</td> 
     <td>{{item.owner.username}}</td> 
     </tr> 
    {{/each}} 
    </table> 
</script> 

JS

App.IndexController = Ember.ArrayController.extend({ 
    filterableProperties: ['name', 'owner.username'], 
    filteredItems: [], 
    filterString: null, 
}); 

App.FilterInputComponent = Ember.Component.extend({ 
    arrangedContentBinding: 'controller.arrangedContent', 
    filterStringBinding: 'controller.filterString', 
    filteredItemsBinding: 'controller.filteredItems', 
    filterablePropertiesBinding: 'controller.filterableProperties', 

    keyPress: function() { 
    var items = this.get('arrangedContent'); 

    console.log('-------------'); 
    console.log('items ' + items); 
    console.log('value ' + this.get('value')); 
    console.log('filterString ' + this.get('filterString')); 
    console.log('valueBinding ' + this.get('valueBinding')); 
    console.log('filterableProperties ' + this.get('filterableProperties')); 

    // filter 'items' here by the value of 'filter-input' and whether or not the property is in the filterableProperties list 

    console.log('filteredItems-before ' + this.get('filteredItems')); 
    //this.propertyWillChange('filteredItems'); 
    this.set('filteredItems', items); 
    //this.propertyDidChange('filteredItems'); 
    console.log('filteredItems-after ' + this.get('filteredItems')); 
    }, 
}); 

콘솔 출력 타이 : 나는 쉽게 휴대 여기

더 많은 것을 생각하면 jsbin입니다 입력 상자

"-------------" 
"items [object Object],[object Object]" 
"filterString null" 
"value null" 
"valueBinding Ember.Binding<ember274>(_parentView.context.filterString -> value)" 
"filterableProperties name,owner.username" 
"filteredItems-before " 
"filteredItems-after [object Object],[object Object]" 

고마워로 핑 'A'는, 어떤 도움도 정말 감사하겠습니다.

Answer 1

나는 다음과 같은 수정을 당신을 위해 일하기 위해 검색을 얻을 수있었습니다 :

여기

App.IndexController = Ember.ArrayController.extend({ 
    filteredItems: function() { 
    var content = this.get("content"); 
    var filterString = this.get("filterString"); 
    if (filterString) { 
     return content.filter(function(item) { 
     return item.name.indexOf(filterString) === 0; 
     }); 
    } else { 
     return content; 
    } 
    }.property("filterString"), 
    filterString: null 
}); 

App.FilterInputComponent = Ember.Component.extend({ 
    filterStringBinding: 'controller.filterString',  
    keyUp: function() { 
    this.set("filterString", this.get("value")); 
    } 
}); 

가 JsBin fiddle입니다!

이 답변으로 문제가 해결되기를 바랍니다.