KnockoutJS : 클릭 이벤트 데이터를 div에 전달

Question

click: 이벤트의 데이터를 다른 div로 전달해야합니다. 다음은 시나리오입니다.

페이지의 한쪽에 링크가 있습니다.

<a data-bind="text: Name, click: $root.editAction"></a> 

페이지의 반대쪽에는 숨겨진 div가 있습니다.

<div data-bind="if: $root.editActionShow"> 
    <input type="text" data-bind="value: Name"/> 
</div> 

가 나는 click: 이벤트에서 $data을 통과 숨겨진 사업부를 할 수 있어야합니다.

아마도 나는이를 너무 생각하고,하지만 내 viewModel는 viewModel.DataGroups.DataGroup.ActionDataGroup에 깊이 묻혀 다양한 Actions 가지고 행동 정보를 편집 할 수있는 단지 1 HTML 양식이있다, 그래서 형태는 것을 보여 만드는 방법을 알아낼 수 없습니다 하나의 특정 작업을 편집하고 싶습니다.

다음은 또 다른 키커입니다. 내 관찰 결과를 내 viewModel에 추가하지 않는 것이 좋습니다. 이유는 내가 .toJS() 끝까지 매핑 한 다음 JSON을 XML로 변환해야하기 때문에 꽤 엄격한 스키마에 대해 유효성을 검사해야하므로 여분의 요소가있는 것이 나쁜 것입니다. 변환 전에 수동으로 제거하지 않으면 유효성 검사를 통과하지 못합니다. 그러나 개체를 viewModel에 추가 할 수 있습니다. 변환 중에 .toJS()이이를 제거하기 때문입니다.

UPDATE : 모든이에

Aaand 솔루션은 아래 재미 손에게 있습니다

viewModel.editAction = function(data) { 
    viewModel.editActionFormShow(true); 
    ko.applyBindings(data, $('#myHiddenDiv')[0]); 
}; 

Answer 1

내가 이해, 당신은 어떤을 할 수있다하는 '클릭 투 편집'기능 같은 것을 원하는에서 단 2 개의 맞춤 바인딩으로 깔끔하게 해결되었습니다!

이 접근법의 가장 큰 장점은 추가 관찰 가능 항목으로 viewModel을 오염시키지 않는다는 것입니다.

바인딩 :

ko.bindingHandlers.hidden = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.bindingHandlers.visible.update(element, function() { 
       return!value; }); 
     } 
    }; 

ko.bindingHandlers.clickToEdit = { 
    init: function(element, valueAccessor,allBindingsAccessor){ 
     var value = valueAccessor(), 
      input = document.createElement('input'), 
         link = document.createElement('a'); 

     element.appendChild(input); 
        element.appendChild(link); 

        value.isEditing = ko.observable(false); 

        ko.applyBindingsToNode(link,{ 
         text: value, 
         hidden: value.isEditing, 
         click: function(){ 
          value.isEditing(true); 
         } 
        }); 

     ko.applyBindingsToNode(input,{ 
      value: value, 
      visible: value.isEditing, 
          hasfocus: value.isEditing 
     }); 
    } 
}; 

뷰 모델

var vm = { 
    name: ko.observable() 
} 

html로

<div data-bind="clickToEdit: name"></div> 

근무 바이올린 : http://jsfiddle.net/8Qamd/

모든 신용 라이언 메이어로 이동합니다.