Skip to content

Commit b327f04

Browse files
lukemelialukemelia
committed
Update to use Ember 0.9.5.
1 parent 55548e3 commit b327f04

12 files changed

+11289
-20115
lines changed

‎css/jquery-ui.1.9pre.css‎

Lines changed: 1 addition & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,34 @@ a:hover { color: #036; }
8686
\\ ========================================== //
8787
*/
8888

89+
body {
90+
max-width: 320px;
91+
margin: 10px;
92+
}
8993

94+
button.ember-view {
95+
width: 100%;
96+
}
9097

98+
div.ember-view {
99+
margin-top: 10px;
100+
margin-bottom: 10px;
101+
}
91102

103+
p.annotated {
104+
margin-top: 30px;
105+
text-align: center;
106+
}
92107

108+
p.annotated a {
109+
color: #66c;
110+
text-decoration: none;
111+
}
93112

94-
95-
96-
97-
98-
113+
p.annotated a:hover {
114+
color: #339;
115+
text-decoration: underline;
116+
}
99117

100118

101119

‎index.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!doctype html>
2-
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
3-
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
2+
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
3+
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
44
<head>
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -21,22 +21,21 @@
2121
<![endif]-->
2222
</head>
2323
<body>
24-
<script type="text/html">
24+
<script type="text/x-handlebars">
2525
{{view App.Button label="Click to Load People"}}
2626
<br><br>
2727
{{view App.ProgressBar valueBinding="App.controller.progress"}}
2828
<br><br>
2929
{{#collection JQ.Menu contentBinding="App.controller.people" disabledBinding="App.controller.menuDisabled"}}
30-
<a href="#">{{content.name}} {{view JQ.Button labelBinding="parentView.content.name"}}</a>
30+
<a href="#">{{content.name}}
3131
{{else}}
3232
<a href="#">LIST NOT LOADED</a>
3333
{{/collection}}
3434
</script>
3535

36-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
37-
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
36+
<script src="js/libs/jquery-1.7.1.min.js"></script>
3837
<script src="js/libs/jquery-ui-1.9pre.js"></script>
39-
<script src="js/libs/sproutcore-2.0.a.4.js"></script>
38+
<script src="js/libs/ember-0.9.5.min.js"></script>
4039
<script src="js/app.js"></script>
4140
</body>
4241
</html>

‎js/app.js‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
var App = SC.Application.create();
1+
var App = Em.Application.create();
22

33
// Put jQuery UI inside its own namespace
44
JQ = {};
55

6-
// Create a new mixin for jQuery UI widgets using the new SproutCore 2.0
6+
// Create a new mixin for jQuery UI widgets using the Ember
77
// mixin syntax.
8-
JQ.Widget = SC.Mixin.create({
9-
// When SproutCore creates the view's DOM element, it will call this
8+
JQ.Widget = Em.Mixin.create({
9+
// When Ember creates the view's DOM element, it will call this
1010
// method.
11-
didCreateElement: function() {
11+
didInsertElement: function() {
1212
this._super();
1313

14-
// Make jQuery UI options available as SproutCore properties
14+
// Make jQuery UI options available as Ember properties
1515
var options = this._gatherOptions();
1616

1717
// Make sure that jQuery UI events trigger methods on this view.
@@ -22,18 +22,18 @@ JQ.Widget = SC.Mixin.create({
2222
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
2323

2424
// Save off the instance of the jQuery UI widget as the `ui` property
25-
// on this SproutCore view.
25+
// on this Ember view.
2626
this.set('ui', ui);
2727
},
2828

29-
// When SproutCore tears down the view's DOM element, it will call
29+
// When Ember tears down the view's DOM element, it will call
3030
// this method.
3131
willDestroyElement: function() {
3232
var ui = this.get('ui');
3333

3434
if (ui) {
3535
// Tear down any observers that were created to make jQuery UI
36-
// options available as SproutCore properties.
36+
// options available as Ember properties.
3737
var observers = this._observers;
3838
for (var prop in observers) {
3939
if (observers.hasOwnProperty(prop)) {
@@ -47,17 +47,17 @@ JQ.Widget = SC.Mixin.create({
4747
// Each jQuery UI widget has a series of options that can be configured.
4848
// For instance, to disable a button, you call
4949
// `button.options('disabled', true)` in jQuery UI. To make this compatible
50-
// with SproutCore bindings, any time the SproutCore property for a
50+
// with Ember bindings, any time the Ember property for a
5151
// given jQuery UI option changes, we update the jQuery UI widget.
5252
_gatherOptions: function() {
5353
var uiOptions = this.get('uiOptions'), options = {};
5454

5555
// The view can specify a list of jQuery UI options that should be treated
56-
// as SproutCore properties.
56+
// as Ember properties.
5757
uiOptions.forEach(function(key) {
5858
options[key] = this.get(key);
5959

60-
// Set up an observer on the SproutCore property. When it changes,
60+
// Set up an observer on the Ember property. When it changes,
6161
// call jQuery UI's `setOption` method to reflect the property onto
6262
// the jQuery UI widget.
6363
var observer = function() {
@@ -78,7 +78,7 @@ JQ.Widget = SC.Mixin.create({
7878
// Each jQuery UI widget has a number of custom events that they can
7979
// trigger. For instance, the progressbar widget triggers a `complete`
8080
// event when the progress bar finishes. Make these events behave like
81-
// normal SproutCore events. For instance, a subclass of JQ.ProgressBar
81+
// normal Ember events. For instance, a subclass of JQ.ProgressBar
8282
// could implement the `complete` method to be notified when the jQuery
8383
// UI widget triggered the event.
8484
_gatherEvents: function(options) {
@@ -97,21 +97,21 @@ JQ.Widget = SC.Mixin.create({
9797
}
9898
});
9999

100-
// Create a new SproutCore view for the jQuery UI Button widget
101-
JQ.Button = SC.View.extend(JQ.Widget, {
100+
// Create a new Ember view for the jQuery UI Button widget
101+
JQ.Button = Em.View.extend(JQ.Widget, {
102102
uiType: 'button',
103103
uiOptions: ['label', 'disabled'],
104104

105105
tagName: 'button'
106106
});
107107

108-
// Create a new SproutCore view for the jQuery UI Menu widget (new
108+
// Create a new Ember view for the jQuery UI Menu widget (new
109109
// in jQuery UI 1.9). Because it wraps a collection, we extend from
110-
// SproutCore's CollectionView rather than a normal view.
110+
// Ember's CollectionView rather than a normal view.
111111
//
112112
// This means that you should use `#collection` in your template to
113113
// create this view.
114-
JQ.Menu = SC.CollectionView.extend(JQ.Widget, {
114+
JQ.Menu = Em.CollectionView.extend(JQ.Widget, {
115115
uiType: 'menu',
116116
uiOptions: ['disabled'],
117117
uiEvents: ['select'],
@@ -124,20 +124,24 @@ JQ.Menu = SC.CollectionView.extend(JQ.Widget, {
124124
this._super(content, start, removed, added);
125125

126126
var ui = this.get('ui');
127-
if(ui) { ui.refresh(); }
127+
if(ui) {
128+
Em.run.next(function(){
129+
ui.refresh();
130+
});
131+
}
128132
}
129133
});
130134

131-
// Create a new SproutCore view for the jQuery UI Progrress Bar widget
132-
JQ.ProgressBar = SC.View.extend(JQ.Widget, {
135+
// Create a new Ember view for the jQuery UI Progress Bar widget
136+
JQ.ProgressBar = Em.View.extend(JQ.Widget, {
133137
uiType: 'progressbar',
134138
uiOptions: ['value', 'max'],
135139
uiEvents: ['change', 'complete']
136140
});
137141

138142
// Create a simple controller to hold values that will be shared across
139143
// views.
140-
App.controller = SC.Object.create({
144+
App.controller = Em.Object.create({
141145
progress: 0,
142146
menuDisabled: true
143147
});
@@ -174,21 +178,21 @@ App.Button = JQ.Button.extend({
174178
App.ProgressBar = JQ.ProgressBar.extend({
175179
// When the jQuery UI progress bar reaches 100%, it will invoke the
176180
// `complete` event. Recall that JQ.Widget registers a callback for
177-
// the `complete` event in `didCreateElement`, which calls the
181+
// the `complete` event in `didInsertElement`, which calls the
178182
// `complete` method.
179183
complete: function() {
180184
// When the progress bar finishes, update App.controller with the
181185
// list of people. Because our template binds the JQ.Menu to this
182186
// value, it will automatically populate with the new people and
183187
// refresh the menu.
184188
App.controller.set('people', [
185-
SC.Object.create({
189+
Em.Object.create({
186190
name: "Tom DAAAAALE"
187191
}),
188-
SC.Object.create({
192+
Em.Object.create({
189193
name: "Yehuda Katz"
190194
}),
191-
SC.Object.create({
195+
Em.Object.create({
192196
name: "Majd Potatoes"
193197
})
194198
]);
@@ -212,7 +216,6 @@ Template:
212216
disabledBinding="App.controller.menuDisabled"}}
213217
<a href="#">
214218
{{content.name}}
215-
{{view JQ.Button labelBinding="parentView.content.name"}}
216219
</a>
217220
{{else}}
218221
<a href="#">LIST NOT LOADED</a>

0 commit comments

Comments
 (0)