Javascript/Knockout (18) 썸네일형 리스트형 "attr" binding Purpose(목적)attr 바인딩은 해당 DOM요소에 어떤 특성 값을 설정하기위한 일반적인 방법을 제공해 줍니다. 예를들어 여러분들이 어떤 요소에 title 특성을 , img태그에 src, a 태그에 href에 view model의 값을 설정하려한다면 attr 바인딩은 매우 유용합니다. 그리고 model속성이 변경되면 자동적으로 해당 특성값이 변경됩니다.Example Report 위예는 href특성에 year-end.html그리고 title 특성에 Report including final year-end statistics 가설정됩니다. ParametersMain parameter(주 파라미터)여러분은 반드시 해당 특성이름에 Javascript객체의 속성이름과 값들을 넘겨줘야합니다. 만약 여러분의 파라.. The "style" binding Purpose(목적)style 바인딩은 해당 DOM요소에 style의 값을 하나또는 그 이상 추가 또는 삭제하는 기능이다. 예를 들어 음수또는 변화값에 따른 width값을 빨간 색으로 강조할때 매우 유용하다.(참고: 여러분이 명시적으로 스타일의 값을 적용하기 원하지 않는다면 CSS 클래스 바인딩을쓰세요)Example Profit Information 위의 예제는 currentProfit값이 0밑으로 떨어지면 해당 요소에 style.color속송을 red로 주려한다 그리고 0 이상이면 검정색으로 표현하려한다.ParametersMain parameter(주 파라미터)해당 스타일의 이름에 맞는 Javascript 객체의 속성 이름을 넘겨줘야한다. 그리고 여러분이 설정하고 싶은 값을 넣어주면 된다.여러분은 한번.. The "css" binding Purpose(목적)css 바인딩은 Css클래스들을 해당 COM 요소에 삭제 또는 추가하는 기능이다. 예를 들어 만약 값이 음수가 되면 빨간 줄을 표시할때 매우 유용하다.Example Profit Information CSS 클래스 profitWarning 는 currentProfit 값이 0 이하일 때만 추가되고 0 이상일때는 삭제 된다.Parameters(파라미터)Main parameter(주 파라미터)CSS 클래스들의 프로퍼티에 Javascript 객체를 바인딩하고 그 값을 true또는 false로 되어있다면 바로 적용 될것이다.여러분들은 CSS클래스에 여러개를 한번에 지정할수 있다. 예를 들어 여러분의 view model에 isServer라는 프로퍼티를 갖고 있다고 가정하자Non-boolean값들.. The "html" binding The "html" bindingPurpose(목적)html 바인딩 여러분의 파라미터로 특정한 HTML을 해당 DOM에서에 보여줍니다.일반적으로 여러분이 렌더링하고 싶은 HTML string을 보여줄때 유용합니다.Example Parameters(파라미터)Main parameter(주 파라미터)KO는 요소의 innerHTML속성을 여러분의 파라미터 값으로 설정합니다. 어떤 전의 내용들은 덮어 써질수 있습니다.만약 이 파라미터가 observable값이면 바인딩은 값이 변경될때만다 자동으로 변경됩니다. 만약 observable이 아니면 요소에 한번만 적용되고 그다음부터는 적용되지 않습니다.만약 숫자또는 string이외의 것들을 제공하고 싶다면 innerHTML은yourParameter.toString() 와.. The "text" binding Purpose(목적)text 바인딩은 해당 DOM요소에 여러분의 파라미터를 보여준다.일반적으로 또는 와같은 전형적으로 텍스트를 보여주기 위한 태크에 유용하다. 그러나 기술적으로 다른 어떤 요소에 사용해도 무방하다.Example(예)Today's message is: Parameters(파라미터)Main parameter(주 파라미터)KO는 IE에서는 innerText 파이어복스에서는 textContent속성에 여러분의 파라미터 값을 설정한다. 어떠한 기존의 text내용도 덮어씌워진다.만약 이 파라미터가 observalbe value이면 바인딩은 값이 변경이 있을때마다 요소의 text속성을 변경해 준다. 만약 파라미터가 observable이 아니라면 한번만 반영된다.만약 여러분이 numer또는 string.. The "visible" binding 목적visible 바인딩은 해당 요소를 여러분들이 바인딩한 값에 의해 보이고 안보이고 하는 기법입니다.Example You will see this message only when "shouldShowMessage" holds a true value. ParametersMain parameter(주 파라미터)파라미터값이 false처럼 됐을때(예 false,0,null,undefined), 바인딩은 여러분의엘러먼트.style.display을 none으로 바꿉니다. 이말은 즉 hidden으로 처리한다는 말이죠. 이 스타일은 여러분이 지정한 스타일보다 우선시 됩니다.파라미터 값이 true처럼 됐을때(예 true, non-null 객체, 객체 배열), 바인딩은 여러분의엘러먼트.style.display의 값을 삭.. Computed Observables Computed Observables만약 여러분이 observable로 firstName과 lastName을 갖고 있고 full name을 보여주기 원한다면 어떻게 할까? 이러한 것으로 부터 computed observable들이 탄생하게 됐다. computed observable은 함수들이고 이것들은 하나 또는 여러개의 다른 observable들과 종속관계를 갖고 있다. 즉 이런 종속관계에 있는것들이 변경이 일어나면 자동적으로 업데이트가 된다는 말이다.예를 들어 다음과 같은 view model 클래스가 있으면function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith');} 여러분은.. Observables Observables Kockout은 3가의 핵심 기능이 있습니다. 1. Observacles and dependency tracking 2. Declarative Bindings3. Templating 이페이지에서는 여러분들은 셋중에 첫번째 것을 배우게 될것입니다. 시작하기에 앞서 MVVM패턴이 무엇인지 그리고 View Model의 개념이 무엇인지 설명하겠습니다. MVVM and View Models Model-View-View Model(MVVM)은 디자인 패턴의 하나로써 User Interfaces를 구성하는데 사용합니다. 이 패턴은 여러분들이 어떻게 세련된 UI를 심플하게 3파트로 나눠서 구성할수 있는 가를 설명합니다. Model : 여러분들의 application의 저장 데이터. 이 데이터는 객.. 이전 1 2 3 다음