녹아웃을 사용하여 DIV를 전환 할 때 이벤트가 발생합니다.

Question

텍스트 요소간에 포커스를 전환 할 때 이벤트 (즉, 저장/취소 대화 상자)를 트리거하려고합니다. 하나의주의 사항이 있습니다. 요소 당 아니고 포함 된 div 당입니다.

동일한 컨트롤이있는 여러 div가 있습니다. 하나의 div를 포함하는 값이 변경되고 포커스가 다른 div로 바뀌면 내가 남겨 두는 녹아웃 데이터가 더티인지 확인한 다음 이벤트를 트리거해야합니다.

녹아웃은 이러한 종류의 이벤트 바인딩을 지원합니까 아니면 다른 것을 연결해야합니까? 내 div에 tabindex 특성을 사용할 수있는 것처럼 보이지만 프레임 워크에서 기존 기능을 사용할 수있는 경우이를 사용하는 것을 선호합니다.

코드의 모형은 다음과 같이 보일 것이다 :

<div> 
    First Name: <input type="text" name="firstName"/><br/> 
    Last Name: <input type="text" name="lastName"/><br/> 
    Customer Type: <select> 
     <option value="Individual">Individual</option> 
     <option value="Corporate">Corporate</option> 
    </select> 
</div> 
<div> 
    First Name: <input type="text" name="firstName"/><br/> 
    Last Name: <input type="text" name="lastName"/><br/> 
    Customer Type: <select> 
     <option value="Individual">Individual</option> 
     <option value="Corporate">Corporate</option> 
    </select> 
</div> 

Answer 1

어떻게 이런 일에 대해. jquery/녹아웃 하이브리드의 종류. 속성을 클릭하면 저장 버튼이 나타납니다. 저장 후 다른 div로 이동하면 포커스가 다시 저장됩니다.

function viewModel() { 
 
    var self = this; 
 
    this.currentDiv = ko.observable(''); 
 
    this.isDirty = ko.observable(false); 
 
    this.save = function() { 
 
    self.isDirty(false) 
 
    } 
 
} 
 

 

 
var vm = new viewModel(); 
 

 

 
(function($) { 
 

 
    ko.applyBindings(vm); //bind the knockout model 
 

 
    $("input, select").not('#save').focus(function() { 
 
    var d = $(this).parent('div').attr('id'); 
 
    if (d != vm.currentDiv() || vm.isDirty()) { 
 
     vm.isDirty(true); 
 
    } else { 
 
     vm.isDirty(false); 
 
    } 
 
    vm.currentDiv(d); 
 
    }); 
 

 
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div1"> First Name: 
 
<input type="text" name="firstName" /> 
 
<br/> Last Name: 
 
<input type="text" name="lastName" /> 
 
<br/> Customer Type: 
 
<select> 
 
    <option value="Individual">Individual</option> 
 
    <option value="Corporate">Corporate</option> 
 
    </select> 
 
</div> 
 
<div id="div2"> 
 
    First Name: 
 
    <input type="text" name="firstName" /> 
 
    <br/> Last Name: 
 
    <input type="text" name="lastName" /> 
 
    <br/> Customer Type: 
 
    <select> 
 
    <option value="Individual">Individual</option> 
 
    <option value="Corporate">Corporate</option> 
 
    </select> 
 
</div> 
 

 
<input type="button" id="save" data-bind="visible: isDirty, click: save" value="save" />