knockout.js => 바인딩

딸깍 하는 소리

click 바인딩은 표시되는 모든 DOM 요소와 함께 사용하여 요소 처리기를 추가 할 수 있습니다.이 처리기는 요소를 클릭 할 때 JavaScript 함수를 호출합니다.

<button data-bind="click: onClick">Click me</button>

ko.applyBindings({
  onClick: function(data, event) {
    // data: the context of the element that triggered the event
    console.log(data);

    // event: the click event
    console.log(event);
  }
});

옵션

이 바인딩을 사용하여 선택한 항목에 대한 옵션을 작성하십시오.

<select data-bind="options: gasGiants"></select>
 
<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
    };
</script>

또한 배열에있는 속성을 사용하여 목록에 표시하고 viewModel에 저장하는 데 사용할 수 있습니다. optionsText 는 사용자 정의 표시 텍스트를 활성화합니다

optionsValue 는 해당 <option> 의 value 속성을 설정합니다.

value 선택한 옵션의 값을 viewModel의 관찰 가능 객체에 저장합니다.

<select data-bind="options: gasGiants, optionsText:'name', optionsValue:'id', value:selectedPlanetId"></select>
 
<script type="text/javascript">
    var viewModel = {
        selectedPlanetId: ko.observable(),
        gasGiants: ko.observableArray([{name:'Jupiter', id:'0'},
                                       {name:'Saturn', id:'1'},
                                       {name:'Neptune', id:'2'},
                                       {name:'Uranus', id:'3'}])
    };
</script>

다중 선택 목록의 결과를 저장하려면 옵션 바인딩을 selectedOptions 바인딩과 결합 할 수 있습니다.

<select data-bind="options: gasGiants, selectedOptions: chosenGasGiants" multiple="true"></select>

<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
        chosenGasGiants: ko.observableArray(['Jupiter','Saturn']) // Initial selection
    }; </script>

비활성화 됨 / 활성화 됨

비활성화 된 바인딩은 disabled 속성을 html 요소에 추가하여 더 이상 편집하거나 클릭 할 수 없도록합니다. 이것은 주로 <input> , <select> , <textarea> , <a> 및 <button> 요소에 유용합니다

<input data-bind="disabled: disableInput"/> 

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

disabled 바인딩의 반대가 enabled

가시성은 JavaScript 함수를 사용하여 계산할 수도 있습니다. 이 함수에서 사용 된 모든 관측 값은 괄호로 호출해야합니다

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

또는

<input data-bind="disabled: allValues().length>4"/> 

<script type="text/javascript">
var viewModel = {
    allValues: ko.observableArray([1,2,3,4,5]);
};
</script>

제출하다

DOM 요소가 제출 될 때 호출 될 이벤트 핸들러입니다.

<form data-bind="submit: doSomething">
    <!-- form content here -->
    <button type="submit"></button>
</form>

<script type="text/javascript">    
    var vm = { 
        doSomething: function(data){
            //do something here
        }; 
    }
</script>

녹아웃은 해당 양식에 대한 브라우저의 기본 제출 조치를 금지합니다. 양식을 일반 HTML 양식처럼 제출하려면 제출 처리기에서 true 를 반환하면됩니다.

값

값 바인딩 을 사용하여 요소의 값을 가져옵니다. 값 바인딩은 모든 폼 컨트롤에 적용될 수 있지만 체크 박스, 라디오 버튼 및 텍스트 입력에 더 적합한 기타 바인딩이 있습니다.

다음 예제에서는 바인딩 요소를 여러 양식 입력 필드에 적용하고 기본값을 채우는 방법을 보여줍니다.

ViewModel 정의 :

var MyViewModel = function(){
    var self = this;
  //Initialize valueOne
  self.valueOne = ko.observable();
  //Initialize valueTwo with a default value of "Value two"
  self.valueTwo = ko.observable("Value two");
  //Initialize the color dropdown, and by default, select the "blue" option
  self.color = ko.observable("blue");
  
  self.valueOne.subscribe(function(newValue){
      console.log("valueOne: " + newValue);
  });
  
  self.valueTwo.subscribe(function(newValue){
      console.log("valueTwo: " + newValue);
  });
  
  self.color.subscribe(function(newValue){
      console.log("color: " + newValue);
  });
}

knockout.js
바인딩 - 양식 필드

수색…

딸깍 하는 소리

옵션

비활성화 됨 / 활성화 됨

제출하다

값