You don't want to have a return statement in your initialize method.
Initialize is called when classes are invoked, but the invocation by
default returns the instance of the class. By having your Button class
return the element, you have no access to setContent.
Using your example above, if I did:
var myButton = new Button();
myButton is the dom element, not the instance of the class.
Consequently any methods in this class are useless. Instead, do
something like this:
var Button = new Class({
initialize : function(){
this.button = new Element('div');
this.setContent('my button');
},
toElement: function(){
return this.button;
},
setContent : function(content){
this.button.set('html', content);
}
});
var myButton = new Button();
$(myButton).inject(...);
myButton.setContent(...);
etc.
The use of the options class would also benefit here, as you could set
options (like what the default text should be).
Finally, the actual usage of this example is questionable, as the code
here basically re-implements the basic Element constructor. If this is
pasted here only as an example of what you're trying to do, then
that's cool, but if you actually want to use this class as illustrated
here, consider:
new Button().setContent('foo');
new Element('div').set('html', 'foo');
You're not really saving yourself any effort.
-Aaron
On Sep 12, 5:27 pm, keif <[EMAIL PROTECTED]> wrote:
> Now that I'm on topic (tee hee, my bad)
>
> new Button().inject(document.body); wouldn't throw an error - it's a valid
> element.
>
> var Button = new Class({
> initialize : function(){
> this.button = new Element('div', {html : 'my button'});
> return this.button;
> },
> setContent : function(content){
> this.button.set('html', content);
> }});
>
> var newButton = new Button().inject(document.body).set('html', 'hello');
> console.log(newButton); // this is in the page!
>
> var myButton = new Button();
> var domElement = $(myButton).set('html', 'goodbye');
> console.log(domElement); // this is ready to be inserted wherever
>
> If you wanted to include the content to be set when you call the button,
> you'd need to set up variables to be passed into the button instance, if
> that's a route you want to go.
>
> So, uh, sorry for the mispost earlier. :-)
>
>
>
> loki der quaeler wrote:
>
> > you'll want your class to implement a method called toElement which
> > returns the Element instance which you'd like inserted in the DOM
> > (this.button in your class example below).
>
> > once it implements this method you can refer to an instance wrapped
> > by the $ function to have access to the instance's Element. in other
> > words:
> > var myButton = new Button();
> > var domElement = $(myButton);
>
> > odd: you can really have the javascript
> > (new Button()).inject(document.body);
> > executed with the Button class described below, and receive no
> > javascript error?
>
> > On Sep 12, 2008, at 4.27 PM, Luca Pillonel wrote:
>
> >> I have a class creating elements. I.E.
>
> >> var Button = new Class({
> >> initialize : function(){
> >> this.button = new Element('div', {html : 'my button'});
> >> return this.button;
> >> },
> >> setContent : function(content){
> >> this.button.set('html', content);
> >> }
> >> });
>
> >> So i can create an element in my DOM like this :
> >> var myButton = new Button().inject(document.body);
>
> >> But how can I make
> >> myButton.setContent('some new content');
> >> ?
>
> >> Thank you
>
> --
> View this message in
> context:http://n2.nabble.com/can-a-class-return-both-himself-and-an-element--...
> Sent from the MooTools Users mailing list archive at Nabble.com.
