質問編集履歴

1

質問の内容を変更

2015/03/29 04:48

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- knockoutJs + Sammy でページ切り替えでエラー
1
+ knockoutJs + Sammy 「Uncaught TypeError: undefined is not a function」
test CHANGED
@@ -4,35 +4,67 @@
4
4
 
5
5
  下記のコードを書いてみたところエラーが発生します。
6
6
 
7
+
8
+
9
+ > Uncaught TypeError: undefined is not a function
10
+
11
+ (anonymous function) knockout-min.js:83
12
+
7
- このエラーを解決するためにはどうすればよいでしょうか。
13
+ n.event.dispatch jquery.min.js:3
14
+
15
+ n.event.add.r.handle jquery.min.js:3
8
16
 
9
17
 
10
18
 
11
-
12
-
13
- > Uncaught ReferenceError: Unable to process binding "click: function (){return goTo('page1') }"
19
+ 検索で調べると「ライブラリーの読み込みの順番が原因」なるのですが、表示した時は問題ありません。クリックすると画面は切り替わりますが、エラーが表示されます。
14
-
15
- Message: goTo is not defined
16
20
 
17
21
 
18
22
 
19
23
  ```lang-html
20
24
 
25
+ <!DOCTYPE html>
26
+
27
+ <html>
28
+
29
+ <head>
30
+
31
+ <title></title>
32
+
33
+ <meta charset="UTF-8">
34
+
35
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
36
+
37
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
38
+
39
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
40
+
41
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.min.js"></script>
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+
48
+
21
49
  <div data-bind="visible:page()=='page1'">page1</div>
22
50
 
23
51
  <div data-bind="visible:page()=='page2'">page2</div>
24
52
 
25
- <div data-bind="visible:page()=='page3'">page3</div>
26
53
 
27
- <button data-bind="click:goTo('page1')">page1</button>
28
54
 
29
- <button data-bind="click:goTo('page2')">page2</button>
55
+ <button data-bind="click:changePage('page1')">page1</button>
30
56
 
31
- <button data-bind="click:goTo('page3')">page3</button>
57
+ <button data-bind="click:changePage('page2')">page2</button>
32
58
 
33
59
 
34
60
 
35
61
  <script src="js/test.js" type="text/javascript"></script>
62
+
63
+
64
+
65
+ </body>
66
+
67
+ </html>
36
68
 
37
69
  ```
38
70
 
@@ -40,57 +72,53 @@
40
72
 
41
73
  ```lang-coffeescript
42
74
 
43
- class viewModel
75
+ viewModel = ->
76
+
77
+ self = this
78
+
79
+ self.page = ko.observable 'page1'
80
+
81
+ self.changePage = (page) ->
82
+
83
+ location.hash = "/#{page}"
44
84
 
45
85
 
46
86
 
47
- constructor: ->
87
+ Sammy( ->
48
88
 
49
- @page = ko.observable 'page1'
89
+ @get '#/page1',->
50
90
 
51
- return
52
-
53
-
54
-
55
- @goTo = (page) ->
56
-
57
- location.hash = page
58
-
59
- return
60
-
61
-
62
-
63
- Sammy ->
64
-
65
- @get '#/',->
66
-
67
- @page 'page1'
91
+ self.page 'page1'
68
92
 
69
93
  console.log 'page1'
70
94
 
71
-
72
-
73
- @get '#/page1',->
74
-
75
- @page 'page1'
95
+ return
76
-
77
- console.log 'page1'
78
96
 
79
97
 
80
98
 
81
99
  @get '#/page2',->
82
100
 
83
- @page 'page2'
101
+ self.page 'page2'
84
102
 
85
103
  console.log 'page2'
86
104
 
105
+ return
87
106
 
88
107
 
89
- @get '#/page3',->
90
108
 
91
- @page 'page3'
109
+ @get '',-> #最後に設置しないと最初にHITしてしまう
92
110
 
111
+ self.page 'page1'
112
+
93
- console.log 'page3'
113
+ console.log 'page1'
114
+
115
+ return
116
+
117
+
118
+
119
+ ).run()
120
+
121
+ return
94
122
 
95
123
 
96
124
 
@@ -98,4 +126,10 @@
98
126
 
99
127
 
100
128
 
129
+
130
+
131
+
132
+
133
+
134
+
101
135
  ```