single page application を作成しようとして、knockoutJsとSammyでページ切り替えをしようとしています。
下記のコードを書いてみたところエラーが発生します。
Uncaught TypeError: undefined is not a function
(anonymous function) knockout-min.js:83
n.event.dispatch jquery.min.js:3
n.event.add.r.handle jquery.min.js:3
検索で調べると「ライブラリーの読み込みの順番が原因」なるのですが、表示した時は問題ありません。クリックすると画面は切り替わりますが、エラーが表示されます。
lang
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.min.js"></script> 10</head> 11<body> 12 13<div data-bind="visible:page()=='page1'">page1</div> 14<div data-bind="visible:page()=='page2'">page2</div> 15 16<button data-bind="click:changePage('page1')">page1</button> 17<button data-bind="click:changePage('page2')">page2</button> 18 19<script src="js/test.js" type="text/javascript"></script> 20 21</body> 22</html>
lang
1viewModel = -> 2 self = this 3 self.page = ko.observable 'page1' 4 self.changePage = (page) -> 5 location.hash = "/#{page}" 6 7 Sammy( -> 8 @get '#/page1',-> 9 self.page 'page1' 10 console.log 'page1' 11 return 12 13 @get '#/page2',-> 14 self.page 'page2' 15 console.log 'page2' 16 return 17 18 @get '',-> #最後に設置しないと最初にHITしてしまう 19 self.page 'page1' 20 console.log 'page1' 21 return 22 23 ).run() 24 return 25 26ko.applyBindings new viewModel() 27 28 29 30
あなたの回答
tips
プレビュー