kickstrapでknockout.jsを使う場合のメモ書き

memo web開発 knockoutjs


kickstrapでknockout.jsを使う場合は、まずkickstrap.lessで@appsのknockoutのコメントを外します

kickstrap.less

@apps: "pinesnotify, //qunit, //bootstrap, //bootstrap/transition, knockout, //updater";


こうすることでKickstrap/apps/knockout/config.ksに記載してあるファイルが読み込まれるようになります

knockout/config.ks

http://netdna.getkickstrap.com/Kickstrap/apps/knockout/knockout.min.js, //knockout.min.js
http://netdna.getkickstrap.com/Kickstrap/apps/knockout/view.model.js, //view.model.js

view.model.jsというものが定義してあるのにちょっと引っかかりました。
view.model.jsはknockout.jsの簡単なサンプルなんですがこれが読み込まれるようになります。

view.model.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.welcomeMessage = "Knockout JS is Running!";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());


なので、他の場所に頑張ってknockout.jsの処理を書いても、こっちが先に読み込まれるようでブラウザのコンソールの以下のようなエラーがでて悩まされることになります。
addTodoをhtml側でdata-bind属性に書いていたんですが上記のview.models.jsには定義されてないのでエラーになってます。

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: addTodo is not defined;
Bindings value: submit: addTodo


正しく使うには、view.model.jsをそのまま編集するか、apps以下に別のフォルダ(例えばmyapp)を作り
myapp/config.ksに

http://netdna.getkickstrap.com/Kickstrap/apps/knockout/knockout.min.js, //knockout.min.js
myapp.js

などと書いて

myapp/myapp.jsに自前の処理を書けばうまくいくと思います。


その場合はkickstrap.lessの@appsにmyappを記載します。
kickstrap.less

@apps: "pinesnotify, //qunit, //bootstrap, //bootstrap/transition, //knockout, //updater, myapp";