Javascript/Knockout (18) 썸네일형 리스트형 The "enable" binding Purpose(목적)enable 바인딩은 해당 DOM소요를 파라미터 값이 true일때 enable시킵니다. 이러한 기능은 input, select, textarea와 같은 요소들에게 매우 유용합니다.Example I have a cellphone Your cellphone number: 위의 예에서 “Your cellphone number” 텍스트박스는 초기화 될때 disable됩니다. 사용자가 “I have a cellphone” 체크박스를 체크할때 이 텍스트 박스는 enable됩니다.Parameters(파라미터)Main parameter(주파라미터)해당 DOM요소가 enable되야할지 안되야할지를 결정하는 값.bool 타입 값이 아닌 값들이 아닌경우 bool타입으로 변환 됩니다. 예를 들면 0과 nu.. The "submit" binding Purpose(목적)submit 바인딩은 해당 DOM요소가 submit될때 호출될 이벤트 핸들러를 추가합니다.일반적으로 여러분은 form여소에 사용하길 원할것입니다.form에서 submit바인딩을 사용할때 Kockout은 form의 기본적인 submit 엑센을 방지합니다. 다시말해서 브라우저는 여러분이 추가한 핸들러를 호출하고 기본적으로 form요소의 엑센을 호출하지 않습니다. 이러한 설정은 submit바인딩을 사용할때 기본적인 설정입니다. 만약 여러분이 정상적인 HTML form을 submit하기 원한다면 단지 submit핸들러에 true를 리턴해 주세요.Example ... form contents go here ... Submit 이 예제에서 설명했던것처럼 KO는 핸들러의 첫 파라미터로 form 요.. The "event" binding Purpose(목적)event 바인딩은 특정한 이벤트에 이벤트 핸들러를 추가시켜준다. 그래서 이벤트가 발생할대 여러분이 선택한 Javascript함수가 호출되게 된다. 이벤트 바인딩은 다음과 같이 어떤 이벤트에도 적용될수 있다. (keypress, mouseover , mouseout)Example Mouse over me Details 지금 여러분의 마우스 포인터를 첫번째 엘러먼터에 올려놨다가 내려놔 보십시오 그러면 view model에 있는 detailsEnabled observable이 호출되어 토글이 될것입니다. 두번째 엘러먼트는 detailsEnabled값이 바뀌면서 보여지고 안보여지고 할것입니다.Parameters(파라머터)Main parameter(주 파라미터)여러분은 반드시 .event 이.. The "click" binding Purpose(목적)click 바인딩은 이벤트 핸들러를 추가하여 해당 DOM의 요소가 클릭될때 선택된 자바스크립트를 호출한다. button,input, a 요소들과 같이 일반적으로 사용된다. 그라나 실제적으로 어떤 보여지는 DOM요소들과 같이 작동한다.Example You've clicked times Click me 매번 버튼을 클릭할때마다 viewModel에 있는 incrementClickCounter()가 호출될것이다. view model의 상태가 바뀌게되면 UI요소들도 업데이트 된다.ParametersMain parameter(주 파라미터)clock 이벤트에 바인딩할 function여러분은 어떤 Javascript 함수도 참조할수 있습니다. 이 말은 view model에서 꼭 함수일 필요가 없다는.. The "with" binding Purpose(목적)with 바인딩은 새로운 바인딩 Context를 생성합니다. 그래서 자손엘러먼트들은 특정개ㄱ체의 문맥안에 바인딩 됩니다.물론 여러분은 if 그리고 foreach와 같은 다른 control-flow바인딩과 함게 with 바인딩을 사용할수 있습니다. Example 1여기서는 기본적인 예로 자식객체에 다른 문맥으로 교체하는 예를 보겠습니다. data-bind 특성에 latitude 또는 longitude 는 접두어 coords가필요하지 않습니다 왜냐면 바인딩 Context가 coords로 변경됐기 떄문입니다. Latitude: , Longitude: Example 2상호 작용하는 예:with 바인딩은 동적으로 해당값이 null/undefined또는 그렇지 않은 값들을 참조하고 있는 자손들을.. The "ifnot" binding Purpose(목적)ifnot 바인딩은 if 바인딩이랑 똑같다 단지 어떤 표현식의 값의 거꾸로일 뿐입니다. 좀더 자세한 사항은 if 바인딩을 참조해 주세요.Note: “ifnot”은 “if”의 부정표현입니다.예로는:...위의 예와 아래예는 같은 결과를 갖습니다.:...someProperty 이 observable이고 그래서 여러분이 그 함수를 호출해야한다고 가정해 봅시다.ifnot 을 if 대신 사용하는 거는 단지 개발자의 취향입니다. The "if" binding Purpose(목적) if 바인딩은 어떤 부분의 markup을 어떠한 조건 값이나 표현이 true( non-null이아닌 객체 또는 빈값이 아닌 string같이 true같은것들)일때 document에 나타내게 합니다. if 바인딩은 visible바인딩과 같은 역할을 합니다.(http://knockoutjs.com/documentation/visible-binding.html) visible과 차이점은 if바인딩은 항상 DOM에 markup을 포함하고 있습니다 그리고 적용된 data-bind특성을 가지고 있습니다. 반면 visible바인딩은 단지 CSS를 사용하여 container 요소들의 visibility만 토글하는 형식입니다. 그러나 if 바인딩은 물리적으로 포함된 markup들을 추가 또는 삭제를 .. The "foreach" binding Purpose(목적) foreach 바인딩은 Array의 각각의 객체를 위해 마크업의 부분을 복사해서 해당 array item에 마크업을 바인딩한다. 테이블이나 리스트를 렌더링할때 매우 유용하게 사용된다. 여러분의 array가 observable array라고 하면 array에 item을 추가하거나 삭제할때 바인딩은 해당 UI를 효율적으로 변경할 것이다. 마크업 추가 또는 삭제는 다른 DOM요소들의 영향없이 반영된다. 물론 여러분은 if 그리고 with와 같은 control-flow바인딩과 함께 foreach 바인딩을 쓸수 있다. Example 1: array 반복하기 이 예제는각각의 foreach로 array item에 read-only row를 생성하는 부분입니다. First nameLast name.. 이전 1 2 3 다음