2014-03-12 2 views
0

내 viewmodel의 속성을 기반으로 입력 요소의 유형을 변경하고 해당 입력 요소의 값을 다른 속성에 바인딩 할 수있는 바인딩을 작성하려고합니다. 내 viewmodel의. fiddle 불행하게도knockout.js의 동적 요소에 동적 바인딩

<div data-bind="dynamic: theType, value: 'theValue'"></div> 

ko.bindingHandlers.dynamic = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var vm = valueAccessor(); 
     var $element = $(element); 

     var choice = ko.unwrap(vm) || 'shortText'; 
     var bindTo = allBindings.get('value'); 

     if (choice === 'longText') { 
      $element.html("<textarea rows='4' data-bind='value: " + bindTo + "' valueUpdate: 'afterkeydown' />"); 
     } else { 
      $element.html("<input type='text' data-bind='value: " + bindTo + "' valueUpdate: 'afterkeydown' />"); 
     } // if 

     ko.applyBindings(viewModel, $element.find(':input')[0]); 
    } 
}; 

var vm = { 
    theValue: ko.observable(''), 
    theType: ko.observable(''), 
}; 
ko.applyBindings(vm); 

, 요소와 뷰 모델 사이의 연결 중 하나에 모든 것을 내가 시도 결과가 손실되는, 또는 녹아웃가 내가 불평 :

나는 다음과 같은 바이올린 내가 달성하기 위해 노력하고 무엇을 보여왔다 동일한 요소에 바인딩을 여러 번 적용 할 수 없습니다. 템플릿으로이 작업을 수행 할 수 있다는 것을 알고 있지만 내 접근 방식이 작동하지 않는 이유가 궁금합니다.

누구에게 의견이 있습니까?

+0

applyBinding을 여러 개 가질 수 없습니다. – Akhlesh

+0

그건 사실이 아닙니다. bindingHandler 내부의 호출에는 호출의 범위를 제한하는 선택적 두 번째 매개 변수가 있습니다. 그것은 완벽하게 합법적이며 그물 전체에 예제가 있습니다. – drdwilcox

+0

두 번째 applyBindings에 대해서도 궁금합니다. 바이올린에 개발자 도구/방화 광을 열면이 오류가 표시됩니다. "동일한 요소에 바인딩을 여러 번 적용 할 수 없습니다." –

답변

1

확인을 주셔서 감사합니다. 내 초기화 방법 및 녹아웃에서

return { controlsDescendantBindings: true }; 

을 나는 잘 지낼 수 있습니다 : 그것은 내가 할하는 데 필요한 모든 추가 것을 밝혀졌다. 업데이트 된 바이올린보기 : http://jsfiddle.net/X4xXL/2/