57602

Rendering Ember component (google line chart) with rails backend

Question:

Recently I started a project with rails backend and ember js, however I find the documentation on both together is difficult to find or quite ambiguous, however I have parts of my app working perfectly.

Now, I decided to code a google line chart in an ember component. With ember inspector, it tends to throw an error on localhost:3000/#/chart currently the error:

<pre class="lang-none prettyprint-override">Uncaught Error: <Sample.ChartView:ember526> Handlebars error: Could not find property 'chart' on object (generated chart controller)

So, here's my code for the relevant files:

assets/javascript/components/chart_component.js:

<pre class="lang-javascript prettyprint-override">var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [51,10,18,58,65,95,87] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }; var data2 = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [51,10,18,58,65,95,87] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }; Sample.LineChartComponent = Ember.Component.extend({ tagName: 'canvas', attributeBindings: ['width', 'height'], width: '480', height: '360', data: null, didInsertElement: function() { var ctx = this.get('element').getContext("2d"); var myNewChart = new Chart(ctx).Line(this.get('data')); } });

javascripts/routes/chart_route:

<pre class="lang-javascript prettyprint-override">Sample.ChartRoute = Ember.Route.extend({ model: function(){ return Ember.Object.create({ modelOne: data, modelTwo: data2 }); } });

Where I'm calling the chart component.. javascripts/templates/chart.handlebars

<pre class="lang-html prettyprint-override"><h2>Chart one</h2> {{chart data= model.modelOne}} <h2>Chart two</h2> {{chart data= model.modelTwo}}

Answer1:

As for the naming convention:

<blockquote>

Components must have a dash in their name. So blog-post is an acceptable name, but post is not. This prevents clashes with current or future HTML element names, and ensures Ember picks up the components automatically.

</blockquote>

<a href="http://emberjs.com/guides/components/defining-a-component/" rel="nofollow">http://emberjs.com/guides/components/defining-a-component/</a>

As far as I see, you called your component simply "charts", that might be the problem.

Recommend

  • JAVA EE Stateless EJB IllegalArgumentException: Can not set field
  • Get form values in Symfony2 controller , Child does not exist
  • h1, h2, h3.. elements eats div margins
  • z-index issues with jQuery Tabs, Superfish Menu
  • Why does my form throw an OutOfMemory exception while trying to load image?
  • Portion of label bold - the rest not bold
  • Angular bind object element to HTML
  • Horizontal Menu Displays Incorrect on Widescreen Monitor
  • Javascript replace “variables” in HTML code faster
  • Ember source code hosting URL for handlebars?
  • How to correctly deal with escaped Unicode Characters in R's library RJSONIO when reading json
  • Rails 4.0.0 jQuery Mobile button icons not showing in production
  • Simple test app deploys to Heroku but won't run
  • FTPWebRequest .NET 3.5 vs 4
  • FOSRestBundle: The controller must return a response (Array()) given
  • Symfony2 and MVC - Is extend controller a good practice?
  • Does CSS support inheritance [duplicate]
  • CSS - Cannot get one spanned style to override another inherited style and align left
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • Python ImageIO Gif Set Delay Between Frames
  • Zurb Foundation _global.scss meta styles for js?
  • jQuery ready not fired after rails link_to is clicked
  • Textfile Structure (tables)
  • Xamarin Forms - UWP Fonts
  • Change JButton Shape while respecting Look And Feel
  • req.body is undefined - nodejs
  • HTML download movie download link
  • Updating server-side rendering client-side
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How do I rollback to a specific git commit
  • Is there a mandatory requirement to switch app.yaml?
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Busy indicator not showing up in wpf window [duplicate]
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?