I'm on Ember Cli version: 0.2.3
I'm currently exploring with Ember, and trying a very simple app.
I have this in my templates/about.hbs
<h1>About</h1>
<p>I'll write 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('Something something');
}
}
});
when I click on the button i get this error, I checked the syntax and can't seem to catch what's wrong. I need some fresh eyes.
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.
Now, I understand what the message is saying, but I don't know how to fix it yet.
Ember probably can not find your controller. You can debug this using ember inspector. In any case you should be using ES6 conventions inside your ember cli project. You can get to know more about the subject here.
Anyway, try to create about controller using command line by typing
ember generate controller about
and then add your action manually.
Are you using ember cli or Ember starter Kit for your program.
If you are using Ember cli then you should create files like -
app/templates/about.hbs
app/controllers/about.js
and you should make one entry in app/router.js too[I think you must have done that.]
Entry in router.js-
Router.map(function() {
this.route('about');
});
Now your template/about.hbs should be-
<h1>About</h1>
<p>I'll write something interesting here</p>
<button {{action 'clickMe'}}>Click me!</button>
and controllers/about.js should be-
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
clickMe: function() {
alert('Something something');
}
}
});
After making all the above changes execute below command on CMD -
ember server (this should start the server)
Your code should work if you do it in above pattern.
Naming conventions are very important in Ember.
Related
I am trying to set up server side rendering using ReactJS.Net in an EPiServer project. In order to do that I am using the provided ReactJS.Net Html extention to do my rendering, however, when I run my site
I get an error saying: "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file."
If I swap from trying to use the server rendering extension to trying to render normally with React
I get a different error: "TinyIoCResolutionException: Unable to resolve type: React.Web.BabelHandler".
I think the root issue is that there is some difference in how an EPiServer project initializes things at start up vs a vanilla .Net MVC project, but I am unsure of what the difference is or how to work around it.
I am working with the React.Web.Mvc4 v4.0.0 nuget package, Episerver 11, and .Net Framework 4.6.2. I took the same component I'm trying to render and pasted it into a vanilla .Net MVC project with no EPiServer and it renders properly client side and server side using the extension, so the component is not the issue. I found something saying that this error is usually seen when React or ReactDOM is not exposed to the global scope so I set it up to ensure that my react component is being added to the global scope, but no luck there either.
Here is my ReactConfig:
public static void Configure()
{
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
ReactSiteConfiguration.Configuration
.AddScript("~/Static/js/Components/PrimaryCallout.jsx");
}
Here is my component:
class PrimaryCallout extends React.Component {
constructor(props) {
super(props);
this.state = {
header: this.props.header,
buttonText: this.props.buttonText,
buttonLink: this.props.buttonLink
};
}
render() {
return (
<div className="primary-callout-container">
<h2 className="primary-callout-header">{this.state.header}</h2>
<a href={this.state.buttonLink} className="primary-callout-link">
<button className="primary-callout-button">{this.state.buttonText}</button>
</a>
</div>
);
}
}
Here is how I'm trying to render my component:
#Html.React("PrimaryCallout", new
{
header = Model.Header,
buttonText = Model.CalloutLinkText,
buttonLink = Url.ContentUrl(Model.CalloutLink)
})
Any and all help or insight is appreciated.
Thank you.
After a lot of digging around I determined the issue I was having was indeed with Babel not with React. The React not initialized error was smothering the true issue. I didn't narrow it down to what in my Babel setup was wrong, but I re-did my bundling and minification setup and now I'm back up and running.
The lesson to take from this for anyone else is if you see this "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file." error then look deeper because it's likely smothering the error message for your true problem.
After the latest release of EmberJS v1.9.0 I am trying to move from Handlebars to HTMLbars. What I am finding very challenging is lack of documentation.
I am trying to implement very simple helpers.
For example take this handlebars helpers:
HTML
<div id="main"></div>
<script type="text/x-handlebars" data-template-name="index">
{{logIt test}}
<h1>{{test}}</h1>
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller){
controller.set('test', 'mytest');
}
});
Ember.Handlebars.registerHelper("logIt", function(something) {
console.log(something);
});
Js Fiddle: http://jsfiddle.net/sisir/p463q2L8/
How do I convert it to htmlbars?
As of Ember 1.13, there are two APIs: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api
The simplest and more common syntax is now this:
export default Ember.Helper.helper(function(params, hash) {
return params.join(' ');
});
Helpers receive two arguments: params are the ordered params passed to a helper, and hash contains the key-value options, for example title="Mr.".
As of Ember 1.10.0, this question is solved by doing Ember.HTMLBars.makeBoundHelper(theHelperFunction).
Edit: since Ember 1.13.6 (July 31, 2015), using this is flagged as deprecated.
DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. Helpers (even dashless ones) are automatically resolved. [deprecation id: ember-htmlbars.register-helper]
I believe you can just use Ember.Handlebars.helper which is what is in the latest emberjs guides. This jsbin uses htmlbars and it works. This is the helper in the jsbin
AppLogItHelper = Ember.Handlebars.helper("logIt", function(something){
console.log(something);
});
If you are using ember-cli it will auto generate one for you but that uses Ember.Handlebars.makeBoundHelper which doesn't work in the jsbin but works in my ember-cli app.
Very an important novelty is HTMLBars have subexpression! Since Ember 1.10+ was switched to HTMLBars and you should use Ember.HTMLBars.makeBoundHelper instead Ember.Handlebars.registerHelper. But you can still use Ember.Handlebars.registerHelper from Ember 1.10.1 version
New approach:
App.XEqHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
return params[0] === params[1];
});
it call from templates as:
{{#if (x-eq order 'delivery_order')}}
Need a delivery
{{/if}}
I've been trying to implement loading indication feature when my application bootstraps and begin to load data from server using ember-data. Created templates/loading.hbs template.
So far loading template is not being rendered while application starts, even tried to emulate network latency using {latency: 4000} option.
routes/application.js
export default Ember.Route.extend({
model: function() {
return this.store.find('items');
}
});
templates/loading.hbs
<div class="loading-overlay">
<div class="spinner"></div>
</div>
Library versions
ember-cli 0.0.39
ember 1.6.1
handlebars 1.3.0
ember-data 1.0.0-beta.8
Also thanks to Balint Erdi who has a great blog on frontend development with EmberJS http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html
Solution
Samples at http://emberjs.com/guides/routing/loading-and-error-substates/
really helped.
App.LoadingView = Ember.View.extend({
templateName: 'global-loading',
elementId: 'global-loading'
});
App.ApplicationRoute = Ember.Route.extend({
actions: {
loading: function() {
var view = this.container.lookup('view:loading').append();
this.router.one('didTransition', view, 'destroy');
}
}
});
Can any one help me with this?
You would also need a LoadingRoute (Loading and error substates) or handle the loading action in the application route
I'm currently reading the Master Time and Space Ember.js tutorial and trying to build the sample application. I'm building the ember app with rails using the ember-rails gem.
I have followed the instructions for building my index route, controller, model and template. However, my index.hbs template is not being rendered due to this error that I am receiving in the console:
Error while loading route: undefined logToConsole
this function logToConsole is defined within the ember.js file that the gem compiles for you.
My router is defined as app/assets/javascripts/routes/app_router.js
TimeTravel.Router.reopen({
location: "history"
});
TimeTravel.Router.map(function(){
this.route("index", {path: "/"});
});
The index route is defined as app/assets/javascripts/routes/index_route.js
TimeTravel.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('trip');
}
});
The controller app/assets/javascripts/controllers/index_controller.js
TimeTravel.IndexController = Ember.ArrayController.extend({
});
Can someone please explain this error? Or at least point out some good debugging tools for ember. Thanks in advance!
I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?
I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>