Call a plain jquery function that's in a different file

Design
1

Is there a way to put a function in something like main.js and then in app.js call it properly?

For an instance I have this in app.js right now…

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
	actions: {
		newIngredient: function() {
			newIngredient();
		}
	}
});
App.IndexController = Ember.ObjectController.extend({
	actions: {
		submit: function() {
			alert('submited');
		}
	}
});
// New ingredient button
function newIngredient() {
	$('<input class="ingredient-input" type="text" name="ingredient" /><br>').fadeIn().insertBefore($('#ingredient-btn'));
	$('input:last').focus();
}

But I would like to move that function into a different file (main.js) to keep things organized (my type A coming out).

What is the best way to get this done, I’ve done some searching but being so new at ember still there are some things talked about that I either can’t follow or don’t feel like are really solving such a simple problem.

2

Hi Jordan,

You can put that function anywhere as long as the script is included in HTML. As long as the function is available in global scope, you’ll be able to access it.

Looking at your code, you’re going to have a hard time doing what you’re doing. The Ember way of doing this would be to put that input field into a template and have the submit button trigger the event that should be handled in the route.

You might want to checkout my article on Ember Sherpa embersherpa.com it will give you a good overview of bunch of things that’s helpful to know when starting with Ember.

1 Like
3

Thanks for that link, using something I saw there I did some more digging and found this fiddle which helped me do this with ember…

Basically I now have this…

App.InputFormView = Ember.View.extend({
templateName: 'input-form',
ingrs: [{ingredient: ''}],
newIngredient: function(){
	this.get('ingrs').pushObject({ingredient: ''});
},
submit: function(){
	alert(this.get('ingrs'));
}

});

My problem now is how can I get the values from the inputs.

My template looks like this…

<script type="text/x-handlebars" data-template-name="input-form">
{{#each view.ingrs}}
	{{input valueBinding="ingredient" classNames="ingredient-input"}}<br>
{{/each}}
<button id="ingredient-btn" {{action "newIngredient" target="view"}}>New Ingredient</button><br>
<button id="submit-btn" {{action "submit" target="view"}}>Find Me Something to Eat!</button>

I’ve tried to figure out how to grab those inputs as a list of ingredients so I can use them with an API later.

EDIT: Just noticed the “JSON.stringify” at the bottom of that fiddle which was commented out and using that I can alert the contents but I’m still not sure how to grab those values.

4

@JordanRDesigns here you go Edit fiddle - JSFiddle - Code Playground

I added an ApplicationRoute, it handles save action that’s triggered by the template.

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        save: function(content){
            var data = [];
            content.map(function(item) {
                data.push(item.getProperties(['name','bio']));
            });
            console.log(data);
        }
    }
});

In the template, I’m passing the value of view.content to the save action handler.

    <button {{action 'save' view.content}}> save form </button>
1 Like
5

With this update I’m still getting [object Object] when I alert

My JS

App.ApplicationRoute = Ember.Route.extend({
    actions: {
	submit: function(ingrs){
		var data = [];
		ingrs.map(function(item){
			data.push(item.getProperties(['ingredient']));
		});
		alert(data);
	    }
    }
});

App.InputFormView = Ember.View.extend({
    templateName: 'input-form',
    ingrs: [Em.Object.create({ingredient: ''})],
    actions: {
	newIngredient: function(){
		this.get('ingrs').pushObject(Em.Object.create({ingredient: ''}));
	}
    }
});

My HTML

{{#each view.ingrs}}
	{{view App.FocusField valueBinding="ingredient" classNames="ingredient-input"}}<br>
{{/each}}
<button id="ingredient-btn" {{action "newIngredient" target="view"}}>New Ingredient</button><br>
<button id="submit-btn" {{action "submit" view.ingrs}}>Find Me Something to Eat!</button>

here is a jsfiddle

6

Don’t alert :slight_smile: Use console.log Also, can you give me a link to your updated fiddle?

1 Like
7

That’s all it was? Geez, thanks man. So now if I want to do something with that like use it as end points in an API how would I iterate over each?

For instance I know I can get a specific element like so…

console.log(data[0].ingredient);

But what would b the best way to iterate over the whole object and just get out those values?

8

My next article is going to be about preloading data from APIs, in the mean time, checkout this article.

Remember to convert your objects to Ember objects by with Em.Object.create(item), its not enough to just insert them into content array because the plain JavaScript objects won’t have Ember methods

9

Just a quick tip on the console.log.

If you want to see all the values just pass the whole object. console.log is a function that can take multiple values. You can mix and match text and values, even whole objects and arrays. For example

console.log("My data %O", data);

The capital O tells the console to print the whole object. If it was a string you could also do something like:

console.log("My string is %s", string_variable);

You could even pass in multiple values.

console.log("First string: %s  Second string: %s", string1, string2);

Going back to your array you could even display arbitrary values:

console.log(data[0].ingredient);

    console.log("First value: %s  Second value: %s", 
                       data[0].ingredient, 
                       data[1].ingredient );

and so on.

More details on console.log here:

  • %s Formats the value as a string.
  • %d or %i Formats the value as an integer.
  • %f Formats the object as a floating point value.
  • %o Formats the value as an expandable DOM element (as in the Elements panel).
  • %O Formats the value as an expandable JavaScript object.
  • %c Applies CSS style rules to output string specified by the second parameter.
1 Like
10

@eccegordo, do you mind if I borrow this for a debugging article on Ember Sherpa?

11

No problem have at it.

Post a link to article here when you are done. I am always looking for better debugging tips.