CODEWITHSUNDEEP
javascriptember.js
reknirt
reknirt

Reputation: 2254

Is this a javascript method or property?

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?

Upvotes: 3

Views: 227

Answers (6)

Jeremy Green
Jeremy Green

Reputation: 8574

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.

Upvotes: 2

Adrien Gorrell
Adrien Gorrell

Reputation: 1319

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 }

Upvotes: 0

guydog28
guydog28

Reputation: 1317

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.

Upvotes: 1

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

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.

Upvotes: 2

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 0

rstackhouse
rstackhouse

Reputation: 2326

"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

Upvotes: 0

Related Questions