Knockout.js의 Hello World

2857 단어 JavaScriptknockoutjs
Knockout를 사용하여 화면에 요소를 표시합니다.

캡처



표시hello wrold!.

소스 코드


index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

<body>
    <span data-bind="text: message"></span>
    <script>
        ko.applyBindings({
            message: 'hello wrold!'
        });
    </script>
</body>

CDN


Knockout은 환경을 단순화하기 위해 CDN을 통해 가져옵니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

binding

<span data-bind="text: message"></span>
ViewModel의 속성을 >에 바인딩합니다.data-bind 속성에서 귀속 목표 속성 이름과 귀속 속성 이름을 지정합니다.

ViewModel 적용

ko.applyBindings({
    message: 'hello wrold!'
});
ko.applyBindings 함수에 ViewModel을 전달합니다.
ViewModel은 개체일 수 있습니다.
ViewModel에 바인딩되는 속성을 정의합니다message.

감상


여기까지는 >의 속성으로 쓴 이상한 기법의 템플릿 엔진으로 보입니다.

관련 보도


Knockout으로 이벤트 프로세서 바인딩

링크


일본어 문서가 많아서 정말 큰 도움이 됐어요.

  • 문서|Knockout일본어 문서
  • Knockout : Home
  • 좋은 웹페이지 즐겨찾기