Simple example - two templates:
<script type="text/x-jsrender" id="tpl-test1">
<div>{{include tmpl="tpl-test2" /}}</div>
</script>
<script type="text/x-jsrender" id="tpl-test2">
<div>Hello World</div>
</script>
If I render tpl-test1, it displays "tpl-test2" in the browser instead of Hello World. If I render tpl-test2, it renders Hello World just fine.
What gives?
Boris, himself, answered my question. The {{include}} needs to specify a selector.
{{include tmpl="#tpl-test2" /}}
Thought I'd post this in case anyone else experiences a similar brain fart. ;-)
Related
I'm writing a quiz in JS and my problem is that I need a lot of formulas, that's why I use MathJax, it works perfectly in HTML.
I'm trying to implement MathJax inside an object for questions and answers but it doesn't render.
This is the MathJax script:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} });
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>
Sorry if this question is repetitve or stupid, I just can't find the right solution.
Thank you in advance!
I am coming from a PHP/Laravel direction and there we use the blade templating engine to load components into a specific layout like this:
Main Layout called: layout.blade.php
<html>
<head><title>Whatever</title></head>
<body>
#yield('content')
</body>
And then we load our components inside this layout by a file like this, called: content.php
#extends(layout)
#section('content')
<h1>This contents is loaded into the Layout</h1>
<p>Yada yada yada</p>
#stop
In the backend we link the route (lets call it "/content") to a controller that creates this view. And anytime we click on a menu-item with an anchor-tag, we load the views into our layout.
Now with Polymer, this is a different story, because I have no Idea how to go on about.
A layout in polymer looks more like this. Let's call this layout-one.html
<html>
<head><title>Whatever</title></head>
<body>
<core-drawer-panel>
<core-header-panel drawer></core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<div>Main Content goes here...</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
It's something like that, I know the structure above might have a mistake, but I am pulling this information out of my head.
Now if I have a different view I want to load inside the "content"-Area, intuitively I would have an achor-tag that loads a "content.html", which in turn would have to have all the html-tags and head-tags and so on... so I would load the complete page, which is counter-intuitive and non-dynamic.
I've seen the Polymer-Team accomplish, what I am trying to accomplish here:
http://www.polymer-project.org/components/core-elements/demo.html#core-scroll-header-panel
Just loading different contents into an existing polymer-layout.
So please in the name of god, can anyone tell me exactly how it is done, because I seriously have no idea at the moment. I am suggesting, that they used something like angular to create the views (because of the hash-tag), but my instinct says, that they made it somehow else.
I would be most glad, if you gave me besides the explanation on how it is done, also any resource on how I would be reproduce this behaviour. Maybe a good article or tutorial.
Thanks mates.
You're looking for the <content> tag. Check out how this works.
simple-layout.html
<polymer-element name="simple-layout" noscript>
<template>
<core-drawer-panel>
<core-header-panel drawer>
<content select=".title"><!-- content with class 'title' --></content>
</core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<content><!-- all other content will show up here --></content>
</core-header-panel>
</core-drawer-panel>
</template>
</polymer-element>
home-page.html
<link rel="import" href="simple-layout.html">
<polymer-element name="home-page" noscript>
<template>
<simple-layout>
<div class="title">Home</div>
<h1>This contents is loaded into the main part of the layout.</h1>
<p>Yada yada yada. More content in the main layout.</p>
</simple-layout>
</template>
</polymer-element>
This way you can load a "page" element and it will include the layout it wants to use.
http://erikringsmuth.github.io/app-router/#/layouts
I'm trying to use ember animated outlet (found here) and, I can not for the life of me get it to work, I understand that instead of using {{outlet}} I need to use {{animated-outlet}} and use {{link-to-aniamted}} instead but it seems to be switching like normal. I also know that I need to include the js after the ember.js and also I am including the css file it comes with, so I'm kind of stumped on this. :(
For my basic view, I'm using
<script type="text/x-handlebars" data-template-name="application">
<div class='wrapper'>
#include('includes.globals.header')
<div class='content row' id='content'>
{{animated-outlet}}
</div>
#include('includes.globals.footer')
#include('includes.js.navigation')
</div>
</script>
and my link looks like:
{{#link-to-animated 'index' animations="main:slideLeft"}} Home #{{/link-to-animated}}
So, is there something i'm missing? Do I need to add something in my app.js? IF you need more code or info, just ask and I will edit this question! Thanks a lot in advance! I'm new to ember, so please take it easy!
You need to specify 'name' in the animated-outlet helper.
{{animated-outlet name="main"}}
The readme explains it: https://github.com/billysbilling/ember-animated-outlet/blob/master/README.md#use-animated-outlet-instead-of-outlet
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>
I am using Google +1 on my games website. It's very difficult for me to validate the page. I tried near about every solutions on stackoverflow but always disappointed :-(
Please help me to solve the problem.
Here is the code I'm using,
<div class="gbutton" ><g:plusone size="medium"></g:plusone></div>
Thank you!
For w3c validation please use the code like,
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<g:plusone size="medium" href=""></g:plusone>');
//]]>
</script>
Apparently this guy has an answer:
http://jamesingham.me/blog/google-plusone-w3c-valid
Even though it's not strictly "valid."
Well, I found a solution which validates the page successfully.
<div class="g-plusone"></div>
But drawback is we can't use size="medium".