I'm using the new sightly language in AEM6 to render my components using templates, in my component there is a video that uses the JWPlayer plugin which needs the following code to initalise the video:
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=123456',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
But I want to make the Youtube variable dynamic so the user can change the id within the author so have got the following template passing in the videoPath (youtube id):
<template data-sly-template.player="${# videoPath}">
Video Id: ${videoPath}
<script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script>
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=' ${videoPath},
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
</template>
The problem I'm having is the ${videoPath} in the tags is not rendering the id where as the one at the top of the template is.
Is there a way in solving this using the sightly templates?
Sightly contains out-of-the-box XSS protection. It detects that you are trying to inject videoPath variable inside the <script> tag and requires to specify the context, so it can escape special characters. In this case it should be scriptString context:
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=${videoPath # context="scriptString"}',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
More info can be found in the Adobe docs.
Related
I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.
What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.
Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html
This is a JS code block that I'm using for Latex rendering.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
crossorigin="anonymous"
></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }
]
});
});
</script>
I try to display week numbers but nothing happens
I put weeknumber in the javascript file
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: true,
height:400,
header: {
left: 'prev,next today, save',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
'defaultView': 'month',
editable: true,
.....
what is this problem ?
Did you import necessary CSS and js for it ?
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
moreover
weekNumbers:
If set to true, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views. See Available views
I'm starting simple, trying to display a single value from a simple model.
This answer to "accessing the model from the template" suggests that it's necessary to extend ObjectController. At this point, there's have no application logic, so it doesn't seem like a controller (or a view) is really needed yet.
Likewise, there are no routes yet, so it doesn't seem like anything should be needed beyond App.IndexRoute.
The single object in the dictionary fixture has a title property with the value Hello Ember. I'm expecting to see that text displayed between two hard-coded arrows. Instead, all I get is the arrows.
The Index.html is:
<!DOCTYPE html>
<html>
<head>
<title>Dictionary</title>
</head>
<body>
<!-- Main body of the application -->
<script type="text/x-handlebars">
<p>Title: -->{{title}}<--</p>
</script>
<!-- ... Ember.js and other JavaScript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app/application.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/models/dictionary_model.js"></script>
<script src="js/controllers/dictionary_controller.js"></script>
</body>
</html>
And then the JavaScript:
// application.js
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// router.js
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
// dictionary_model.js
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
// dictionary_controller.js
App.DictionaryController = Ember.ObjectController.extend({
});
I'm not sure where you're reading in the documentation that's contradicting, please update your question with the contradicting statements so they can be fixed.
The controller really only need be defined if you need to add additional computed properties, actions, or other methods. In your case you are correct in that it needn't be defined.
That being said, the application template (or unnamed template as in your case) is the root of your ember app. Any child routes/resources will be rendered in the {{outlet}} located in the application template(examples below).
The index route is a route underneath the application route. Resources are considered routes that can have children and generally associated with a model.
All this comes up to the main problem you're seeing. You've returned your model from the index route, but you are attempting to use it in the application route's template.
Here's a simplified version of your code
Code
App = Ember.Application.create();
App.ApplicationAdapter= DS.FixtureAdapter;
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
Templates
<script type="text/x-handlebars">
<h2>Application Template</h2>
Here we Are in the Application Template
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Template</h2>
{{title}}
</script>
Example in action
http://emberjs.jsbin.com/OxIDiVU/443/edit
How can you load a view or template content when ember select element changes?
I'm barely new to ember, this might be quite easy but I've been struggling too much already for this simple task. Any suggestions?
Following up on #intuitivepixel's answer, here is how to dynamically load a template based on select change.
//EMBER APP TEMPLATE
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function(){
return [
{name: 'Kris', template: 'kris'},
{name: 'Luke', template: 'luke'},
{name: 'Alex', template: 'alex'}
];
}
});
App.EmbeddedView = Ember.View.extend({
templateName: Ember.computed.alias('controller.selected'),
templateNameDidChange: function() {
this.rerender();
}.observes('templateName')
});
<script type="text/x-handlebars">
<h4>Load a view on ember select change?</h4>
{{view Ember.Select
contentBinding="this"
optionValuePath="content.template"
optionLabelPath="content.name"
valueBinding="selected"
prompt="Please select a name"
}}
<hr/>
{{view App.EmbeddedView}}
</script>
<script type="text/x-handlebars" id="luke">
THE LUKE TEMPLATE
</script>
<script type="text/x-handlebars" id="alex">
THE ALEX TEMPLATE
</script>
<script type="text/x-handlebars" id="kris">
THE KRIS TEMPLATE
</script>
This example will switch between the luke/alex/chris templates depending on the select box.
See this jsbin for a live example: http://jsbin.com/uzekop/1/edit
Although you should post some code of what you have tried, this example might help you get started so you can improve your question.
See here for an example on how you could change a button label depending on the selected value of a select box.
Hope it helps.
(This question is related to this one)
I have a web2py application which I want to extend with some ember.js code. The delimiters of the templating systems in web2py and ember.js conflict (both are {{ and }}). Since my application has no ember.js legacy, I would like to write the ember.js code using a different delimiter. Is this possible?
The template engine use by ember.js is Handlebars.js, and I don't think you can change the delimiter.
I've seen the other question, and perhaps an other answer could be found here : Handlebars.js in Django templates
In web2py: response.delimiters = ('[[',']]')
If you don't want to change any delimiters (on web2py or in handlebars) you can do it by saving the handlebars template in an external file like people.hbs in the
web2py /static/ folder for example
{{#each people}}
<div class="person">
<h2>{{first_name}} {{last_name}}</h2>
</div>
{{/each}}
And in the view import that file using jQuery load() function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<div id="list"></div>
<script id="people-template" type="text/x-handlebars-template"></script>
<script type="text/javascript">
$('#people-template').load('/static/people.hbs', function() {
var template = Handlebars.compile($("#people-template").html());
var data = {
people: [
{ first_name: "Alan", last_name: "Johnson" },
{ first_name: "Allison", last_name: "House" },
]
};
$('#list').html(template(data));
});
</script>