3

I'm having the hardest time getting my terminology right. In the following code:

Notes.NotesController = Ember.ArrayController.extend({
  newNoteName: null,

  actions: {
    createNewNote: function() {
        var content = this.get('content');
        var newNoteName = this.get('newNoteName');
        var unique = newNoteName != null && newNoteName.length > 1;

        content.forEach(function(note) { 
            if (newNoteName === note.get('name')) {
             unique = false; return;
           }
         });

        if (unique) {
            var newNote = this.store.createRecord('note'); 
            newNote.set('id', newNoteName);
            newNote.set('name', newNoteName);
            newNote.save(); 

            this.set('newNoteName', null);
          } else {
            alert('Note must have a unique name of at least 2 characters!');
         }
     } 
  }
});

What is 'newNoteName:', 'actions:', and 'createNewNote:'?

Are they methods or properties or hooks? What are the differences? And does 'createNewNote' being nested inside of 'actions:' make 'actions' something altogether different?

What is the difference between ember 'hooks' and methods/properties that you create and name yourself and how they're used?

Thank you.'

[UPDATE]

Where does 'content' come from?

Notes.NotesNoteController = Ember.ObjectController.extend({
actions: {
    updateNote: function() {
        var content = this.get('content');
        console.log(content);
        if (content) {
            content.save();
        }
    }
 }
});

It isn't an attribute of the model so how does Ember know what to retrieve with

this.get('content')

Does it come with the textArea handlebars helper?

1
  • I rather see them as key/value pairs, same as in the JSON format. Sep 19, 2013 at 21:20

6 Answers 6

2

All of the previous answers are correct, however, none of them address the Ember conventions at play in your question.

newNoteName is a property of the NotesController. Inside the template called 'notes' you can display it using {{newNoteName}} or use it in an input with {{input value=newNoteName}}. In the NotesController you can read the value with this.get('newNoteName') and you can set the value with this.set('newNoteName').

actions is a special property on Ember controllers. Any functions declared in the actions hash can be called in a template. Using createNewNote as an example, you can use something like this to call the function in response to a button click:

<button {{action 'createNewNote'}}>Create New Note</button>

createNewNote is a controller action. It can be called from a template, as shown above, or it can be invoked from other controllers or views using send.

From another controller you might have this:

Notes.OtherController = Ember.Controller.extend({
  needs : ["notes"],
  actions : {
    someAction : function(){
      this.get('controllers.notes').send('createNewNote');
    }
  }
});

[UPDATE] : Addressing the question about hooks.

In Ember hooks are functions that you can create on your objects that Ember will call at various points as it manages your object hierarchy and lifecycle. For instance, in a Route you will often want to implement the model hook. If you have declared a function called model in a Route, then Ember will call that method automatically when it needs to get a hold of the model that is to be represented by that route. This allows you to override the default way that Ember looks for a model, without needing to also implement all of the things that Ember does in the way of Route/Controller creation and setup. Hook methods are really technically no different than other methods that you may implement on your objects, the only real difference is that Ember will automatically call hook methods at the appropriate time.

[UPDATE 2] : Where does 'content' come from?

content is the object that your controller is representing. The route sets the content on the controller, and it is retrieved from the model hook. Ember has some smart defaults built in that will try to do the right thing based on your Router. But you can implement the model hook to return whatever you want.

If you haven't created Notes.NotesRoute yourself, then Ember is generating one for you that is more or less equivalent to this:

Notes.NotesRoute = Ember.Route.extend({
  model : function(){
    return this.store.find('note');
  }
});

That controller is finding all Note models and setting that collection to the content property of the NotesController.

5
  • Thanks very much! This helps a lot. Do you know of any other sources that explain this in more detail?
    – reknirt
    Sep 20, 2013 at 14:55
  • The Ember guides is probably the best resource. emberjs.com/guides I just realized that I missed your question about hooks. I'm going to add an [UPDATE] to my answer. Sep 20, 2013 at 15:33
  • One more question popped up regarding 'content'. I updated my question if you get a second. Thanks so much.
    – reknirt
    Sep 20, 2013 at 18:06
  • See [UPDATE 2] in the answer above. Sep 21, 2013 at 4:40
  • Thank you Jeremy for this great and detailed answer. I'm guessing that the question may arise from reading the Ember.js In Action book which left me with the same question about the "content" line, which is repeatedly presented in code, but not explained at all. It's a shame that the book has not been written/updated to account for this, but good that resources like StackOverflow can pick up the slack. Jul 16, 2014 at 17:48
2

They are all properties of an object, they just have different types.

In your code snippet:

  • actions points to another Object,
  • createNewNote is a Function object (which, when assigned to a property, is referred to as a "method"), and
  • newNoteName is just a reference to null, at the moment.
1

I'm not a JS expert so hopefully my terminology will be at the right level...

Essentially all JS boils down to Functions and Objects. Anywhere you see {..} you have an object, as this is called Object Literal Notation.

Objects have properties, whose values can be anything from null to other Objects (strings etc) to functions.

Functions take arguments, which can be other functions or objects.

So, extend and createNewNote are functions, and the argument passed into the extend function is an object, and the value of the action property is an object.

1
  • Functions are just Function objects. (Almost) everything in JavaScript is an object.
    – Cᴏʀʏ
    Sep 19, 2013 at 21:31
0

"newNoteName" is a property. "actions" is a property. "createNewNote" is a method.

Suggest you take a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

0

newNoteName is a property, equal to null.

actions is a property, containing an literal object.

Inside that anonymous object, createNewNote is a method defined by an anonymous function. It's not just a property set to a function, because that would evaluate to the result of the function. To call this method, you would use this:

Notes.NotesController.actions.createNewNote();

This will execute the function set in createNewNote.

1
  • I'm not familiar with Ember.js, so the function may get called in some other way. Sep 19, 2013 at 21:30
0

They are all properties or "names".

Thinking JSON helps understanding better what's happening.

Just consider you have an object. You can set properties of this object by giving them a name. You can assign to this property a value, which can be an object, a string, an array, a function, etc.

var myObject = { propertyName : propertyValue }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.