From 6dc138a6534d9e2ef43c392df9593c020e749f58 Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Sun, 21 Apr 2013 16:49:42 +0200 Subject: [PATCH 1/6] some changes to enable using the mixin with jQuery UI plugins created using the "widget factory" utility from jQuery UI. Changes include: a possible uiNamespace setting on the ember view object. It makes it possible to use plugins that use other namespaces than the jQUeryUI native "ui" one. The "ui" namespace it default, so it's specification is not needed if only native jQUI Widgets are used -- The retrieval of the ui property of the mixin has been changed in order to be able to retrieve not only the native jQueryUI widget instances. Native ones are defined as properties on the jQuery UI object itself, which was previously used. Now the widget is first created on the jQuery-Object of the views DOM-Element, than the reference to the widget itself is created and saved like before. --- js/app.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/js/app.js b/js/app.js index e41bc42..57e1a6a 100755 --- a/js/app.js +++ b/js/app.js @@ -17,8 +17,13 @@ JQ.Widget = Em.Mixin.create({ // 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, ohter jQuery UI plugins may (or rather should) use their own namespace + + jQuery(this.get('element'))[this.get('uiType')](options); //create widget + var ui = jQuery(this.get('element')).data("ui-"+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); @@ -38,7 +43,10 @@ JQ.Widget = Em.Mixin.create({ this.removeObserver(prop, observers[prop]); } } - ui._destroy(); + + + //ui._destroy(); this is private, so we better use + ui.destroy(); } }, @@ -188,6 +196,9 @@ 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. + + console.log("epic stuff happened"); + this.set('controller.people', [ Em.Object.create({ name: "Tom DAAAAALE" From 0a0f979f80c4fa57e3e3d558695e1f112d17a09d Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Sun, 21 Apr 2013 22:31:05 +0200 Subject: [PATCH 2/6] fixed: use of "namespace" variable and with it compatibility to external widgets; leftover debug message (console.log) --- js/app.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js/app.js b/js/app.js index 57e1a6a..b9b0060 100755 --- a/js/app.js +++ b/js/app.js @@ -15,13 +15,15 @@ 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 namespace = this.get('uiNamespace') || 'ui'; //the included jQuery UI widgets use the 'ui' namespace, ohter jQuery UI plugins may (or rather should) use their own namespace + + 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("ui-"+this.get('uiType')) ;//save instance + 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 @@ -196,9 +198,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. - - console.log("epic stuff happened"); - + this.set('controller.people', [ Em.Object.create({ name: "Tom DAAAAALE" From 5ab84ba681c790d290718a6e928384857d1d34e9 Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Fri, 26 Apr 2013 08:53:19 +0200 Subject: [PATCH 3/6] Revert "fixed: use of "namespace" variable and with it compatibility to external widgets; leftover debug message (console.log)" This reverts commit 0a0f979f80c4fa57e3e3d558695e1f112d17a09d. --- js/app.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js/app.js b/js/app.js index b9b0060..57e1a6a 100755 --- a/js/app.js +++ b/js/app.js @@ -15,15 +15,13 @@ 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 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 + var namespace = this.get('uiNamespace') || 'ui'; //the included jQuery UI widgets use the 'ui' namespace, ohter 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 + var ui = jQuery(this.get('element')).data("ui-"+this.get('uiType')) ;//save instance // Save off the instance of the jQuery UI widget as the `ui` property @@ -198,7 +196,9 @@ 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. - + + console.log("epic stuff happened"); + this.set('controller.people', [ Em.Object.create({ name: "Tom DAAAAALE" From 17384f988a6f58ef4d3a8ee1962795898751d9c6 Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Fri, 26 Apr 2013 09:00:13 +0200 Subject: [PATCH 4/6] Revert "Revert "fixed: use of "namespace" variable and with it compatibility to external widgets; leftover debug message (console.log)"" This reverts commit 5ab84ba681c790d290718a6e928384857d1d34e9. --- js/app.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js/app.js b/js/app.js index 57e1a6a..b9b0060 100755 --- a/js/app.js +++ b/js/app.js @@ -15,13 +15,15 @@ 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 namespace = this.get('uiNamespace') || 'ui'; //the included jQuery UI widgets use the 'ui' namespace, ohter jQuery UI plugins may (or rather should) use their own namespace + + 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("ui-"+this.get('uiType')) ;//save instance + 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 @@ -196,9 +198,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. - - console.log("epic stuff happened"); - + this.set('controller.people', [ Em.Object.create({ name: "Tom DAAAAALE" From d5af136f283262a5f673197d8b979b262603a2fd Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Fri, 26 Apr 2013 13:18:43 +0200 Subject: [PATCH 5/6] first working version; attempted to get rid of the deprecated collection helper not totally succesful; classes missing. --- index.html | 13 ++++++++++++- js/app.js | 24 ++++++++++++++++++------ 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index dc67f9a..ea36d12 100755 --- a/index.html +++ b/index.html @@ -26,7 +26,17 @@

{{view App.ProgressBarView valueBinding="progress"}}

- {{#collection JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}} + + {{#view JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}} + {{#each people}} + {{name}} + + {{else}} + LIST NOT LOADED + {{/each}} + {{/view}} + + {{#collection JQ.MenuView contentBinding="people" disabledBinding="menuDisabled"}} {{name}} {{else}} LIST NOT LOADED @@ -35,6 +45,7 @@ + diff --git a/js/app.js b/js/app.js index b9b0060..d05d7a7 100755 --- a/js/app.js +++ b/js/app.js @@ -107,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. @@ -120,6 +121,16 @@ 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, { +/*JAN: +* Collection View extends Container view, so first that: +* Enables use of mutableArray methods in order to manage Child views. +* +* +* +* + */ + + uiType: 'menu', uiOptions: ['disabled'], uiEvents: ['select'], @@ -143,7 +154,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}}") }) }); @@ -177,7 +189,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); From bfc6477f1895e43d09085d21e42e656779e5a384 Mon Sep 17 00:00:00 2001 From: JAN DITTRICH Date: Fri, 26 Apr 2013 13:38:59 +0200 Subject: [PATCH 6/6] cleaning.. --- index.html | 17 ++++++++++------- js/app.js | 9 --------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ea36d12..cb3d9b5 100755 --- a/index.html +++ b/index.html @@ -21,12 +21,8 @@ -