CamelCase Naming conventions

Design
1

Hi

Does anybody know of a good resource for a more complete description of the naming conventions in ember, with lots of useful examples?

I understand the system has a few core functions like camelize, dasherize, decamelize, underscore, classify, etc. But trying to understand how they are used downstream in the conventions.

In particular I am curious about what is specifically implied by MultiCamelCase naming.

By way of concrete example:

assume a specific view class I want to subclass elsewhere in the app

App.ModalView = Ember.View.extend({
  // Common modal view implmentation...
});

With some subclass (the camel case is deliberately exaggerated)

App.ModalCrazyCamelCaseExampleView = App.ModalView.extend({
  // specific events and functions
});

Elsewhere in one of my routers (or a controller) I have some specific event handler

modalOpen: function(){
  this.render('modalcrazycamelcaseexample', { into: 'application', outlet: 'modal' }) 
}

I am confused about how to name the “context” that is passed to the render function and what to name the handlebars template. (note I am using ember-rails gem)

Given App.ModalCrazyCamelCaseExampleView

I am not sure the expected convention in this case

run-on naming

  this.render('modalcrazycamelcaseexample', { into: 'application', outlet: 'modal' })

with

  modalcrazycamelcaseexample.handlebars

or underscore naming

  this.render('modal_crazy_camel_case_example', { into: 'application', outlet: 'modal' })

with

  modal_crazy_camel_case_example.handlebars

or dasherized naming

  this.render('modal-crazy-camel-case-example', { into: 'application', outlet: 'modal' })

with

  modal-crazy-camel-case-example.handlebars

The guides don’t really have any extendedCamelCase examples as far as I can tell.

I am trying extend Adam Hawkings modal example.

http://jsbin.com/uzogun/1

But I can’t figure out why this doesn’t work

http://jsbin.com/uronaq/1/edit

2

camelCase is generally accepted as lowercase for the first letter. I’ll see if I can find some documentation in ember that its template names are camelcase and add it.

  <script type="text/x-handlebars" data-template-name="modalFoo">

  this.render('modalFoo', { into: 'application', outlet: 'modal' });

http://jsbin.com/uronaq/3/edit

3

Cool thanks.

Also realize I am not sure how to pass a model or arbitrary data via the render function

I tried to do something like this but doesn’t work

  this.render('modalFoo', { into: 'application', outlet: 'modal', model: foo });

You can see what I am trying to do here.

http://jsbin.com/uronaq/12/edit

4

Not that I’d recommend doing any of this, but the model is from the route, which is application.

http://jsbin.com/uronaq/14/edit

5

OK I see. But is there no way to pass data programmatically via the render method?

this.render(‘modalFoo’, { into: ‘application’, outlet: ‘modal’ });

What if it was just a string and not a full model? I am trying to figure out how to get dynamic data into the modal view.

Per the guides it looks like you can do this via handlebars.

THE {{render}} HELPER

{{render}} takes two parameters:

The first parameter describes the context to be setup The optional second parameter is a model, which will be passed to the controller if provided

Maybe I just don’t understand the relationship here.

Will try to work on a more precise JSBin.

6

that {{render}} is used inside of templates, not inside of your code, the render you are looking at is this one http://emberjs.com/guides/routing/rendering-a-template/

 this.render('favoritePost', {   // the template to render
  into: 'posts',                // the template to render into
  outlet: 'posts',              // the name of the outlet in that template
  controller: 'blogPost'        // the controller to use for the template
});

Here’s an example of using a specified controller, I added another link and changed the model of the controller before calling it. You’ll notice I originally setup the woot controller in the activate of application. This is because since we don’t ever hit the woot route, it won’t have created an instance of the woot controller yet, so I’m creating it before hand (all weird to me, my urls and links all handle this, but no issue)

Then in the second link I replace the model on the controller with a new model “Rooster”

The third link I replace the model with the Pig.

I also added an input field, and bound it to the name so you could see ember and its magic.

http://jsbin.com/uronaq/19/edit

7

Thanks for the example that helps.

A little bit about the specific use case I am trying to solve. I need to create several routeless modals that I can pass data in and out of. I want to pass the data around without a lot of explicit binding.

This data is generate by the user but doesn’t come from the server and under certain conditions it will be “committed” or save into other models in the system.

Hopefully that makes sense.

I guess I have to get my head around the “always state full” and long lived controllers. I have played with the {{ unbound }} helper a little. Still experimenting.

Thanks for all your help.