jQuery 在自定义 ember 的把手助手中不起作用

Question

I've just learned from others to write a helper to replace <title> in different templates, then I try to write a testing example like this:

Ember.Handlebars.helper('headTitle', function (title) {
  Ember.$('head').find('title').text(title);
});

But this not work at all. I've also try to use console.log(Ember.$('head').find('title')) to see if it's really select the <title> tag, and it does not. The real strange things happens next: after loading all the codes, I type Ember.$('head').find('title') in the browser's console, now it finds the tag!

Why jQuery not works in Handlebars helper?

I put the testing code in jsfiddle, please help me to figure this out, thank you.

http://jsfiddle.net/nightire/8arRv/1/

UPDATE:

Sorry guys, I finally made it works (change the <title> content as I expected), before I was use the same value as the initial one, so I can't see the difference between them.

You can check the working code at: http://jsfiddle.net/nightire/8arRv/2/

But during this experience, I also found if I change the selector for another pre-existing element, it does not work like above one. To see this strange behavior, take look at this version: http://jsfiddle.net/nightire/8arRv/3/

The only thing I've changed is the selector in helper function, instead of looking for <title> now I want to find an element with id #title .

I still can not understand why, hope someone can give an explanation.

Answer 1

To put it plainly, putting DOM manipulation code in a Handlebars helper like that is a terrible idea. Handlebars helpers are not meant to call random functions, they're meant to insert data, in place, into the DOM. You don't even technically know how or when that method is being called since it's an implementation detail (which is probably why your code isn't working how you expect it to).

If you want to change the document title, I suggest something like this . There's a pull request for document.title integration into Ember, but it hasn't been merged yet.