Skip to content

usage of general jQueryUI Plugins #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

usage of general jQueryUI Plugins #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6dc138a
some changes to enable using the mixin with jQuery UI plugins created…
jdittrich Apr 21, 2013
0a0f979
fixed: use of "namespace" variable and with it compatibility to exter…
jdittrich Apr 21, 2013
5ab84ba
Revert "fixed: use of "namespace" variable and with it compatibility …
jdittrich Apr 26, 2013
17384f9
Revert "Revert "fixed: use of "namespace" variable and with it compat…
jdittrich Apr 26, 2013
d5af136
first working version; attempted to get rid of the deprecated collect…
jdittrich Apr 26, 2013
bfc6477
cleaning..
jdittrich Apr 26, 2013
ebe09bb
Merge branch 'implement-example_customjqui'
jdittrich Apr 26, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,25 @@
<![endif]-->
</head>
<body>

<!--Work In Progress:
{{#view JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}}
{{#each people}}
<a href="#">{{name}}</a>

{{else}}
<a href="#">LIST NOT LOADED</a>
{{/each}}
{{/view}}
-->

<script type="text/x-handlebars">
{{view App.ButtonView label="Click to Load People"}}
<br><br>
{{view App.ProgressBarView valueBinding="progress"}}
<br><br>
{{#collection JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}}

{{#collection JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}}
<a href="#">{{name}}</a>
{{else}}
<a href="#">LIST NOT LOADED</a>
Expand All @@ -35,6 +48,7 @@

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/jquery-ui-1.10.2.js"></script>
<script src="js/libs/customExampleWidget.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.2.js"></script>
<script src="js/app.js"></script>
Expand Down
36 changes: 25 additions & 11 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,17 @@ JQ.Widget = Em.Mixin.create({
// Make sure that jQuery UI events trigger methods on this view.
this._gatherEvents(options);

// Create a new instance of the jQuery UI widget based on its `uiType`
// and the current element.
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));



var namespace = this.get('uiNamespace') || 'ui'; //the included jQuery UI widgets use the 'ui' namespace, other jQuery UI plugins may (or rather should) use their own namespace

// Create a new instance of the jQuery UI widget based
// on its `uiType`, it's jQuery UI Namespace
// and the current element.
jQuery(this.get('element'))[this.get('uiType')](options); //create widget
var ui = jQuery(this.get('element')).data(namespace+"-"+this.get('uiType')) ;//save instance


// Save off the instance of the jQuery UI widget as the `ui` property
// on this Ember view.
this.set('ui', ui);
Expand All @@ -38,7 +45,10 @@ JQ.Widget = Em.Mixin.create({
this.removeObserver(prop, observers[prop]);
}
}
ui._destroy();


//ui._destroy(); this is private, so we better use
ui.destroy();
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch

},

Expand Down Expand Up @@ -97,10 +107,11 @@ JQ.Widget = Em.Mixin.create({

// Create a new Ember view for the jQuery UI Button widget
JQ.ButtonView = Em.View.extend(JQ.Widget, {
uiType: 'button',
uiOptions: ['label', 'disabled'],

tagName: 'button'
uiType: 'myButton',
uiOptions: ['label'], //if this is not provided, the jQueryUI mixing fails since it triues to collect options that arn't existing. It needs to be Array
uiNamespace: 'myprefix',
tagName: 'button',
uiEvents:['buttonclick']//if this is not provided, the jQueryUI mixing fails since it triues to collect options that arn't existing. It needs to be Array.
});

// Create a new Ember view for the jQuery UI Menu widget.
Expand All @@ -110,6 +121,7 @@ JQ.ButtonView = Em.View.extend(JQ.Widget, {
// This means that you should use `#collection` in your template to
// create this view.
JQ.MenuView = Em.CollectionView.extend(JQ.Widget, {

uiType: 'menu',
uiOptions: ['disabled'],
uiEvents: ['select'],
Expand All @@ -133,7 +145,8 @@ JQ.MenuView = Em.CollectionView.extend(JQ.Widget, {
// bindings is the content of this child view.
context: function(){
return this.get('content');
}.property('content')
}.property('content'),
template: Em.Handlebars.compile("{{name}}")
})
});

Expand Down Expand Up @@ -167,7 +180,7 @@ App.ApplicationController = Em.Controller.extend({
// Create a subclass of `JQ.ButtonView` to define behavior for our button.
App.ButtonView = JQ.ButtonView.extend({
// When the button is clicked...
click: function() {
buttonclick: function() {
// Disable the button.
this.set('disabled', true);

Expand All @@ -188,6 +201,7 @@ App.ProgressBarView = JQ.ProgressBarView.extend({
// list of people. Because our template binds the JQ.MenuView to this
// value, it will automatically populate with the new people and
// refresh the menu.

this.set('controller.people', [
Em.Object.create({
name: "Tom DAAAAALE"
Expand Down