Setting a class name for <Body:>

Ilkka Huotari

unread,

May 13, 2012, 9:55:09 PM5/13/12

to der...@googlegroups.com

Hi,

I only took a brief shot at this, but couldn't find a way to set a class name for a body tag (<Body:>).

Is there a way to do this?

Thank you.

Nate Smith

unread,

May 13, 2012, 10:07:26 PM5/13/12

to der...@googlegroups.com

The body section does not add a body element. Just put a body tag inside of the template

Ilkka Huotari

unread,

May 14, 2012, 12:14:36 AM5/14/12

to der...@googlegroups.com

Yes, that was in the docs too, forgot about that.

Thanks.

P.S. Thanks for the framework, I've made a bunch of posts here, some feedback etc. overall it's just super.

Сергей Дроганов

unread,

May 9, 2014, 7:48:53 PM5/9/14

to der...@googlegroups.com, na...@nateps.com

Hello, it's not so for 0.6

<Body:>

</div>

</body>

leads to:

Attach failed for <header>​…​</header>​
 within <body class=​"responsive">​…​</body>​
 index.js:898

Uncaught Error: Attaching bindings failed, because HTML structure does not match client rendering. 

and:

<Body:>

</div>

Works smooth.

So, how to add a classname to the body in 0.6?

понедельник, 14 мая 2012 г., 6:07:26 UTC+4 пользователь Nate Smith написал:

Nate Smith

unread,

May 9, 2014, 9:00:36 PM5/9/14

to der...@googlegroups.com

Yep, the template system is completely overhauled, and the body tag is now included in the default page template. The only special template now is called "Page" and it can be overridden. Is is defined here: https://github.com/codeparty/derby/blob/master/lib/App.server.js#L41

You can define your own <Page:> template if you want to change it such as,

<Page:>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><view name="{{$render.prefix}}Title"></view></title>
<view name="{{$render.prefix}}Styles"></view>
<view name="{{$render.prefix}}Head"></view>
</head>
<body class="responsive {{$bodyClass($render.ns)}}">
<view name="{{$render.prefix}}Body"></view>

or whatever you like

--
You received this message because you are subscribed to the Google Groups "Derby" group.
To unsubscribe from this group and stop receiving emails from it, send an email to derbyjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Сергей Дроганов

unread,

May 10, 2014, 9:49:51 AM5/10/14

to der...@googlegroups.com, na...@nateps.com

Nate, thank you!

суббота, 10 мая 2014 г., 5:00:36 UTC+4 пользователь Nate Smith написал:

Сергей Дроганов

unread,

May 10, 2014, 7:25:01 PM5/10/14

to der...@googlegroups.com, na...@nateps.com

Nate, something went wrong.

I put this to my index.html:

<Page:>

and in the browser I see:

><script defer async data-bundle='{

"queries": [],

"contexts": {

"root": {

"fetchedDocs": {},

"subscribedDocs": {},

"fetchedQueries": {},

"subscribedQueries": {}

}

},

"refs": [],

"refLists": [],

"fns": [],

"filters": [],

"collections": {

"$connection": {

"state": "connected"

},

"$render": {

"params": {

"url": "/",

"body": {},

"query": {}

},

"url": "/",

"query": {},

"prefix": ""

}

},

"racerBrowserChannel": {

"reconnect": true

}

}' src="/derby/site"></script>

суббота, 10 мая 2014 г., 5:00:36 UTC+4 пользователь Nate Smith написал:

Curran Kelleher

unread,

May 10, 2016, 6:40:56 AM5/10/16

to Derby, na...@nateps.com

Hello,

I just want to point out that the HTML comment strings in the Title lead to this result in Google's index:

I'm looking for a way to fix this. I do not understand the meaning of "{{$render.prefix}}", and I can't seem to find any documentation of it.

I'd like to override the Page template, but how to do this? I tried making a view in my app called "Page.html", but that did not have any effect. I noticed the current location of the definition is App.server.js#L45. I'd like the Page template to be the following.

<Page:>

<!DOCTYPE html>

<html>

<head>

<title>{{_page.title}}</title>

</head>

<body>

</body>

</html>

Can anyone help me override the Page template and remove these comments from the title? What steps are required? Thank you very much.

Best regards,

Curran

Curran Kelleher

unread,

May 10, 2016, 6:52:01 AM5/10/16

to Derby, na...@nateps.com

Solved it:

app.views.register('TitleElement',

'<title>{{_page.title}}</title>'

);

Inserted into index.js of the app. This gets rid of the HTML comment strings in the title, but also forces the title to be defined in _page.title.

Curran Kelleher

unread,

May 10, 2016, 11:50:41 AM5/10/16

to Derby, na...@nateps.com

It turns out that this solution actually causes another issue:

Uncaught Error: View parsing not available templates.js:212

View._parse @ templates.js:212

View.parse @ templates.js:201

View.attachTo @ templates.js:191

Page.attach @ Page.js:95

App._finishInit @ App.js:86

(anonymous function) @ App.js:118

It seems like this is because the lines I added are executing on the client, but should only executed only on the server. I tried adding {serverOnly: true} as the third argument, but the error persisted.

Here's the solution I eventually arrived at that solves this issue as well, by explicitly checking if we are on the server or client:

var racer = require("racer");

if (racer.util.isServer) {

app.views.register("TitleElement", "<title>{{_page.title}}</title>");

}

Regards,

Curran

Regards,

Curran

Nate Smith

unread,

May 11, 2016, 4:14:44 PM5/11/16

to der...@googlegroups.com

Should be made more clear in docs, but you must use the <Title:> view
to specify the title and you cannot use the HTML <title> element.
Kinda a long story, but as you have discovered, making it do the right
thing on the server and the client is a bit touchy.

Don't overwrite <TitleElement:> which actually the parent of <Title:>.
Should "just work" if you put your title in the <Title:> view. See:
https://github.com/derbyjs/derby-examples/blob/master/chat/index.html

Nate Smith

unread,

May 11, 2016, 4:17:03 PM5/11/16

to der...@googlegroups.com

Also don't add a DOCTYPE or any of the <html>, <head>, <body>, etc boilerplate. Derby adds the neccessary tags for a valid HTML5 document

Curran Kelleher

unread,

May 12, 2016, 1:54:55 AM5/12/16

to der...@googlegroups.com

Thank you for the pointers with this.

I would like to use <Title:>. It does "just work" in that it makes the title appear correctly, however the thing that breaks the Google indexing is the comment strings that get inserted into the DOM. See, if I set the title as follows

<Title:>

<Head:>

trap.css">

...

Then, inspecting the DOM shows the following:

The problem for me is the "" and "" that gets inserted.

Is there any way you know of that I could still use <Title:>, and also remove these comments from the DOM? Thank you.

There is a secondary issue also, where I'd like to add the mobile-friendly stuff to the <meta> tag, but Derby seems to be inserting one of those for me, so I'm ending up with two.

Thanks for your time on this, I really appreciate it.

Best regards,

Curran

You received this message because you are subscribed to a topic in the Google Groups "Derby" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/derbyjs/F8_I4S0CoMo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to derbyjs+u...@googlegroups.com.

Nate Smith

unread,

May 12, 2016, 1:25:08 PM5/12/16

to der...@googlegroups.com

You actually have to have multiple meta tags. The meta tag Derby adds is just a recommended practice of including a meta tag that defines the character encoding. Character encoding is also indicated with an HTTP header, but if the page is saved as a file and loaded in a browser, the browser won't display the page correctly without the character encoding info in the meta tag. The other meta tag serves a totally different purpose. This is totally normal for any webpage.

The title issue is arguably Google's bug. I worked there a while ago, so I'll look into getting someone to investigate. See:

https://www.google.com/search?q=chat%20site%3Aderbyjs.com

http://www.bing.com/search?q=site%3Aderbyjs.com+chat

https://duckduckgo.com/?q=site%3Aderbyjs.com+chat

https://www.yandex.com/search/?text=site%3Aderbyjs.com%20chat&lr=90

The server generated page is perfectly valid HTML5:

https://html5.validator.nu/?doc=http%3A%2F%2Fchat.derbyjs.com%2Flobby&showsource=yes

And you'll notice that the HTML does not contain the comments in the title, since those are only generated for client-side DOM rendering purposes. The browser displays the value of document.title (which properly looks like "Chat (33) - User 1474") as the tab text, and that does in fact ignore the comment nodes, which are perfectly valid DOM nodes at that location.

This is getting screwed up by how Google now executes client-side JS as part of indexing. It is then serializing the HTML for the DOM, and in fact the HTML "<title>Chat (33) - User 1474</title>" does actually mean the document title "Chat (33) - User 1474". If you make the comment nodes via the DOM they are comments, but text within the HTML <title> element is completely literal, so if you take the innerHTML of it and then subsequently parse it as HTML, you get a different result than if you use a proper document.title implementation that a browser would do. Serializing a DOM into HTML and then parsing the HTML is well documented to not necessarily produce an equivalent DOM: https://html.spec.whatwg.org/multipage/syntax.html#serialising-html-fragments:html-parser-3

I'll see if Google is willing to fix the issue.

Curran Kelleher

unread,

May 13, 2016, 7:21:06 AM5/13/16

to der...@googlegroups.com

Hi Nate,

Thanks so much for your reply. It makes perfect sense, and it's interesting to realize that Google's indexer actually runs the JavaScript on the page before scraping. I wonder when they started doing that...