Ember component wont use extended class

1

i have a problem with ember. Im trying to create a component but ember wont use my own component class.

    // ------- main

require( ["handlebars", "ember"], function() {

    app = Ember.Application.create( {
        LOG_ACTIVE_GENERATION: true,
        LOG_TRANSITIONS_INTERNAL: true,
        LOG_VIEW_LOOKUPS: true,
        LOG_BINDINGS: true,
        LOG_TRANSITIONS: true 
    });         

    require(["js/components/rsa-key.js"], function() {

        app.Router.map( function() {
            this.resource('application', { path: "/" });
        });                                 

    });             


});
<script type="text/x-handlebars" data-template-name="application">

    <h1>Title: {{title}}</h1>
    {{rsa-key}}
</script>     

// ---------- rsa-key-component
<script type="text/x-handlebars" id="components/rsa-key">

<div class="controls-row">
//.....         
            <label for="storageLoadKey" class="col-lg-2 control-label" {{ action "toggle" }} >Local storage: </label>
//.....
</div>

</script>
// ---------- rsa-key.js
define([], function( ) { 

    app.RsaKeyComponent = Ember.Component.extend({  
        tagName: "nav",
        actions: {

            toggle: function() {
                alert("toggle");
            },
            localSave: function() {

                alert("save");
            }
        }

    });


});

The strange thing is that if i remove the “require(“rsa-key.js”)” and replace it with the content of it it works like a charm.

So the question is why doesent it work if i load it via require js?

2

This is because Ember seek for your XXComponent upon application startup, so you have to provide it before the application creation, not after.

3

You mean before this line of code:

But i thought i have to append my class to app?

I also tried to add

app.deferReadiness();

as written in the Ember.Application docu:

		require( ["handlebars", "ember"], function() {
		
			app = Ember.Application.create( {
				LOG_ACTIVE_GENERATION: true,
				LOG_TRANSITIONS_INTERNAL: true,
				LOG_VIEW_LOOKUPS: true,
				LOG_BINDINGS: true,
				LOG_TRANSITIONS: true 
			});	

			//-->	here
			app.deferReadiness();
							
			require(["js/components/rsa-key.js"], function() {

				app.Router.map( function() {
					this.resource('test', { path: "/" });
				});
						
				// --> here	
				app.advanceReadiness();
			
			});				

		
		});

But still it wont use my class.

Thank you for your help stuxxn

4

I put some console log infos into my file. One for the Application ready function and one after I add RsaKeyComponent to App.

		App = Ember.Application.create( {
			LOG_ACTIVE_GENERATION: true,
			LOG_TRANSITIONS_INTERNAL: true,
			LOG_VIEW_LOOKUPS: true,
			LOG_BINDINGS: true,
			LOG_TRANSITIONS: true,
			ready: function() {
				console.log("called ready");
			} 
		});

rsa-key.js

define([], function( ) { 
	
	
	App.RsaKeyComponent = Ember.Component.extend({	
		tagName: "h1",
		actions: {
			
			toggle: function() {
				alert("toggle");
			},
			localSave: function() {
				
				alert("save");
			}
		}
		
	});
	console.log("init rsaKeyComponent");	  
	
});

in the console i see the output:

  • init rsaKeyComponent
  • called ready

So imho it should work? But it still wont call my action handlers. Im really kinda frustrated.

stuxxn

5

Your component must be appended to app at this stage, not after creation,

You need something like:

app = Ember.Application.create( {
LOG_ACTIVE_GENERATION: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_VIEW_LOOKUPS: true,
LOG_BINDINGS: true,
LOG_TRANSITIONS: true 
RsaKeyComponent: RsaKeyComponent
});

And make sure that RsaKeyComponent is the object you defined as a module.

6

Hi asaf000,

I didnt try your solution yet, but im wondering why in all the example code on the ember page I see thinks like that:

App = Ember.Application.create();

todos = [{
  title: "Learn Ember.js",
  isDone: false
}, {
  title: "Make awesome web apps",
  isDone: true
}];

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return todos; 
  }
});

App.TodoItemComponent = Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['isDone']
});

CUSTOMIZING A COMPONENT’S ELEMENT

I´ll try your solution asap.

Thank you

7

I really suggest you to avoid maintaining modules dependencies yourself and try the modules loader provided in EAK (Ember App Kit), You can find it here:

https://github.com/stefanpenner/ember-app-kit