Ember.js - 하나의 배열에 바인딩 된 여러 checkeboxes

나는 체크 박스 목록을 가지고 있으며 사용자가 두 개만 선택할 수 있도록 허용 할 수 있습니다. 그런 다음 선택한 확인란의 값을 배열에 추가해야합니다. 또한 사용자가 해당 확인란을 선택하지 않으면 해당 값을 제거 할 수있는 기능이 필요합니다.Ember.js - 하나의 배열에 바인딩 된 여러 checkeboxes

나는이 질문을 How to push/pop arrays in Ember.js?과 그 옳은 길에 읽었지만, 내가 필요한 것은 아니다.

나는이 :

<label {{bindAttr class='checked:active'}}> 
    {{view Ember.Checkbox valueBinding='id' }} 
    Select 
</label>

나는 또한 검사 할 때 적용되는 "활성"클래스가 필요합니다.

아이디어가 있으십니까?

출처

2014-05-15 JDillon522

이렇게하면 진행 방법에 대한 아이디어를 얻을 수 있습니다.

여기는 working demo입니다.

다음은 관련 코드입니다. 이것을 재사용을위한 구성 요소로 분리 할 수 있습니다.

App.IndexController = Em.ArrayController.extend({ 
    selectedOptions: [], 

    optionsSelected: function() { 
    console.log(this.get('selectedOptions').toArray()); 
    }.observes('selectedOptions.[]') 
}); 

App.DeveloperController = Ember.ObjectController.extend({ 

    isChecked: false, 

    resetFlag: false, 

    _isCheckedChanged: function(){ 
    if(!this.get('resetFlag')) { 
     var isChecked = this.get('isChecked'); 

     if(isChecked) { 
     if(this.get('parentController.selectedOptions').length >= 2) { 
      this.set('resetFlag', true); 
      this.set('isChecked', false); 
     } else { 
      this.get('parentController.selectedOptions') 
       .addObject(this.get('content')); 
     } 
     } else { 
     this.get('parentController.selectedOptions') 
      .removeObject(this.get('content')); 
     } 
    } else { 
     this.set('resetFlag', false); 
    } 
    }.observes('isChecked') 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each item in model itemController="developer"}} 
     <label {{bindAttr class='checked:active'}}> 
     {{view Ember.Checkbox checkedBinding="isChecked"}} 
     {{item.content}} 
     </label> 
    {{/each}} 
    </ul> 
</script>

출처

2014-05-16 03:41:08 blessenm

이 꽤 멋지다. 나는 그것을 소용돌이 치고 돌아올거야. – JDillon522

잘 했어! 내 필요에 맞게 몇 가지를 조정해야했지만 그래. 나는 어디에서 시작해야할지 몰랐다. 그리고 이제 나는 알고있다. "아는 것이 전쟁의 절반이다." (트릭은 특정 컨트롤러를'{{#each}} '에 전달하는 것이 었습니다. – JDillon522

다음은 Ember 구성 요소를 기반으로하는 작업 솔루션입니다.

모든 엣지 경우를 처리하지 않습니다. 구성 요소가 렌더링 된 후에 변경되는 바운드 값이지만 기본은 수행합니다. 필요한 경우 쉽게 확장 할 수 있습니다.

가 갖는 배열을 위해 Ember.A()를 사용하여 구성 될 수 addObject 등

요소 :

App.ArrayCheckboxComponent = Em.Component.extend({ 

    value: null # included in array when checked 
    array: null # array to bind to 
    _checked: null # boolean 

    init: -> 
    @_super.apply(this, arguments) 
    array = @get('array') 
    unless array.addObject && array.removeObject && array.contains 
     throw new Error('Array used for `ArrayCheckboxComponent` must implement addObject/removeObject') 
    if array.contains(@get('value')) 
     @set('_checked', true) 
    else 
     @set('_checked', false) 

    checkedDidChange: (-> 
    value = @get('value') 
    array = @get('array') 
    if @get('_checked') 
     array.addObject(value) 
    else 
     array.removeObject(value) 
).observes('_checked') 

})

부품 서식 :

{{view Em.Checkbox checkedBinding='_checked'}}

사용법 :

{{array-checkbox value='item1' arrayBinding='path.to.array'}}

더 많은 구성 요소는 :

http://emberjs.com/guides/components/

출처

2014-06-16 11:52:18 sandstrom

Ember.js - 하나의 배열에 바인딩 된 여러 checkeboxes

답변

관련 문제