소개

Knockout.js의 학습/검증을위한 환경을 로컬 Mac에 구축했습니다. View의 조작 정도라면, Knockout.js 는 경량이고 간단하기 때문에.

대략적인 방법으로는 Yeoman 공식 webapp 제너레이터를 바탕으로 Bower에서 Knockout.js를 설치했습니다. 스크립트는 CoffeeScript로 작성하는 것이 쉽기 때문에 그것도 도입했습니다.

전제

OS: Mac OS X 10.9.4 (Mavericks)

Yeoman, Grunt, Bower를 사용합니다. 아직 설치하지 않은 경우 이전에 작성한 이 게시물을 참조하십시오.

API 서버를 Rails, 프런트 엔드를 AngularJS로 개발한다 [그 ②]

구축 절차

Yeoman 공식 webapp 제너레이터를 사용합니다. Knockout.js에 국한되지 않고 다른 JavaScript 라이브러리를 사용해도이 생성기를 사용하면 Grunt/Bower 환경이 처음부터 정렬되므로 편리합니다.
(상용용 등 본격적으로 사용한다면 어느 정도 지식이 필요하고 또 하기 어려운 부분도 나올까 생각합니다만.)

발전기를 설치.

$ npm install -g generator-webapp

발전기를 시작합니다. 이때 --coffee를 붙입니다.

$ yo webapp --coffee

CSS는 SASS를 사용하고 싶기 때문에 선택합니다. Bootstrap는 필요하다면.

잘 모르겠지만, 적절하게 y를 입력. (이게 뭐야?)

병아리가 생기면 다음은 Bower에서 Knockout.js를 설치합니다.

$ bower install knockoutjs --save

결과 bower.json 는 다음과 같습니다.

bower.json

{
  "name": "knockout-js-learning",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "~3.1.0",
    "jquery": "~1.11.0",
    "knockoutjs": "~3.2.0"
  },
  "devDependencies": {}
}

jQuery는 원래부터 들어간 것 같습니다.

다음 명령을 치면 index.html가 자동으로 편집되어 Knockout.js를 읽습니다.

$ grunt bowerInstall

결과 index.html 는 다음과 같습니다.

app/index.html

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/knockoutjs/dist/knockout.js"></script>
<!-- endbower -->
<!-- endbuild -->

일단 여기에서 동작 확인해 보겠습니다.

$ grunt serve

Knockout.js를 실행해보십시오.

라고 해도 초보자입니다만, 넷등을 참고로, 적당하게 써 봅니다.

ViewModel 만들기

CoffeeScript 로 쓰는 경우는, class 를 이용한 쓰는 방법이 샤레오트같다.ko.observable 에서 데이터 바인딩할 수 있습니다.

app/scripts/main.coffee

class TestViewModel
  constructor: (first, last) ->
    @firstName = ko.observable(first)
    @lastName =  ko.observable(last)
    @fullName = ko.computed =>
      @lastName() + " " + @firstName()

$ ->
  ko.applyBindings(new TestViewModel("太郎", "山田"))

View 만들기

app/index.html

〜
<div class="container">
    <p>姓：<input data-bind="value: lastName, valueUpdate: 'afterkeydown'"></p>
    <p>名：<input data-bind="value: firstName, valueUpdate: 'afterkeydown'"></p>
    <h4>フルネームは <span data-bind="text: fullName"> </span></h4>
</div>
〜

확인

데이터 바인딩이 가능했습니다^^

그 외

릴리스용으로 빌드하는 경우는 $ grunt build 로 합니다.

Rails에 Knockout.js를 도입하는 경우는 다음과 같습니다. gem으로 넣을 수 있습니다.

Rails 4에서 Knockout.js를 사용하는 단계