반응형 knockoutjs 학습4 [knockoutjs] custom element 사용 관련 custom element 란 일반적인 태그를 컴포넌트 형태로 분리하여 custom element(custom tag)에 마음껏 붙일 수 있다. react에서 사용되는 컴포넌트의 개념과 비슷하다고 보면 된다. custom element 사용 방법 - template으로 사용할 html파일을 만들고 그 안에는 tag들로 구성 - ko.components.register('엘리먼트이름', {template:템플릿}); - 템플릿 부분에는 직접 string 형태로 태그를 넣어도 되지만, 외부에서 파일을 읽어오게 할 수 있다. 이때는 require를 사용하거나, require-text를 사용하면 된다. 사용 시 주의점 - custom element는 소문자와 대시로 구성된 이름을 사용해야한다. - 예상되는 원인.. 2023. 1. 19. [knockoutjs] data-bind text에서 문자열을 추가하는 방법 knockoutjs에서 태그 안에 data-bind="text:변수"를 view model에 있는 값을 불러오도록 하는데 저렇게 하면 태그 안의 값이 치환되는 형태이다. 그렇다면 불러온값 외에 다른 string을 추가하는 것은 어떻게 하는 것인지에 알아보자. 직접 테스트한 샘플 코드는 아래와 같다. People foreach를 사용하였고 그 경우 index를 가져오는 방법, 그리고 view model에 있는 객체의 값을 가져오는 방법, 객체 안에 다시 객체로 되어져 있는 경우 값을 가져오는 방법으로 구성하였다. 2023. 1. 11. [knockoutjs]viewModel에 함수 정의 위치에 따른 차이 knockoutjs의 기본 예제에 있는 코드를 참고하여 submit에 사용되는 함수의 위치에 따른 코드 차이와 visible을 적용한 샘플 코드이다. 외부에 선언을 할 경우에는 생성을 하고 함수에 this를 bind해줘야 한다. addItem addItem2 2023. 1. 11. [knockoutjs]observable을 사용하여 데이터 관찰 객체와 함수형 차이 knockoutjs는 mvvm 패턴을 사용하여 데이터가 변하면 ui에 있는 값도 자동적으로 변경되게 해주는 라이브러리이다. https://knockoutjs.com/documentation/observables.html Knockout : Observables Observables Knockout is built around three core features: Observables and dependency tracking Declarative bindings Templating On this page, you’ll learn about the first of these three. But before that, let’s examine the MVVM pattern and the concept of .. 2023. 1. 11. 이전 1 다음 728x90