Strange issue encountered with Ember controllers

Question

Strange issue encountered with Ember controllers

I am currently using Ember Cli version: 0.2.3

Exploring Ember for the first time and experimenting with a simple app.

This is what I have in my templates/about.hbs

<h1>About</h1>

<p>Adding something interesting here</p>

<button type="btn btn=primary"{{action 'clickMe'}}>Click me!</button>

and in my controllers/about_controller.js

Blogger.AboutController = Ember.Controller.extend({
  actions: {
    clickMe: function() {
      alert('Trying something new');
    }
  }
});

Upon clicking the button, I encountered an error and after checking the syntax, I'm unable to identify what's causing it. I need a fresh perspective on this.

Uncaught Error: Nothing handled the action 'clickMe'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

Although I understand the message, I am unsure of how to resolve this issue at the moment.

javascript ember.js ember-cli

Answer 1

Answer №1

It seems like Ember is having trouble finding your controller. You can troubleshoot this issue by using Ember Inspector. Make sure to follow ES6 conventions within your Ember CLI project. For more information on this, you can check out this link.

To resolve this issue, try creating an about controller using the following command in your command line:

ember generate controller about

After creating the controller, don't forget to add your action manually.

Answer 2

It seems like Ember is having trouble finding your controller. You can troubleshoot this issue by using Ember Inspector. Make sure to follow ES6 conventions within your Ember CLI project. For more information on this, you can check out this link.

To resolve this issue, try creating an about controller using the following command in your command line:

ember generate controller about

After creating the controller, don't forget to add your action manually.

Answer 3

Answer №2

Do you prefer using Ember CLI or the Ember Starter Kit for your project?

If you opt for Ember CLI, be sure to create files such as - app/templates/about.hbs app/controllers/about.js and don't forget to add an entry in app/router.js [assuming you have already done that.] The entry in router.js should look like this:

Router.map(function() {
  this.route('about');
 });

Your template/about.hbs file should contain:

<h1>About</h1>

<p>Here lies some interesting content</p>

<button {{action 'clickMe'}}>Click me!</button>

And your controllers/about.js should be structured as follows:

import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
       clickMe: function() {
      alert('Something exciting will happen here');
    }
  }
});

Once you have made all these changes, run the following command in your terminal - ember server (this should begin running your server)

If you follow this pattern, your code should work seamlessly. Remember, naming conventions play a crucial role in Ember development.

Answer 4

Do you prefer using Ember CLI or the Ember Starter Kit for your project?

If you opt for Ember CLI, be sure to create files such as - app/templates/about.hbs app/controllers/about.js and don't forget to add an entry in app/router.js [assuming you have already done that.] The entry in router.js should look like this:

Router.map(function() {
  this.route('about');
 });

Your template/about.hbs file should contain:

<h1>About</h1>

<p>Here lies some interesting content</p>

<button {{action 'clickMe'}}>Click me!</button>

And your controllers/about.js should be structured as follows:

import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
       clickMe: function() {
      alert('Something exciting will happen here');
    }
  }
});

Once you have made all these changes, run the following command in your terminal - ember server (this should begin running your server)

If you follow this pattern, your code should work seamlessly. Remember, naming conventions play a crucial role in Ember development.

Strange issue encountered with Ember controllers

Answer №1

Answer №2

Similar questions

What is the best way to define defaultProps for a nested object?

The Execution of a Function Fails When Passed to a Functional Component

The countdown value in Javascript is not being reset when clearInterval is called

What is the purpose of using async/await in Node.js when it is inherently asynchronous, and in JavaScript as well, vice versa?

Error: Node.js/Express unable to connect to static assets

Flashing bug in the outFunction of jquery hover()

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Number each element in sequence

Techniques for retrieving user inputs upon loading the HTML document and detecting changes using JavaScript

Having trouble using jQuery's .off() method to remove an event handler?

Exploring Bootstrap datatables to search through nested table data with Codeigniter

Run javascript code after the page has transitioned

Exploring AngularJS: Utilizing limitTo and filter

What steps should I take to build a TypeScript project (using tsdx) while excluding the source files from the final output?

The transform operation has no effect whatsoever

Console log is not displaying the JSON output

Exploring the utilization of functions beyond module exports

JS Difficulty with Applying Underline in Contenteditable

Error 404 in Angular HTTP Request

Update a document by removing elements from an array where the objects are of a certain value