Is it possible to code a view programatically instead of using an html template? All the demos I have seen use an html template.
Yes it is possible.
Add your HTML markup as a string for property templateString,
the following code does not use an .html template as for your question.
You can use string concatenation in order to modify your template programatically.
More information on templateString here.
Example below is taken from user Ben from this answer to a my older question:
require(['dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(_WidgetBase, _TemplatedMixin, declare, domReady) {
//Foo represent any widget with template available in dojo
//replace by the widget you want to use
var Foo = declare([_WidgetBase, _TemplatedMixin], {});
var foo = new Foo({
templateString: '<div>This is my teemplate and ${bar}</div>',
bar: "this is added to the template"
});
foo.placeAt('layout');
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="layout"></div>
You can also use placeholder's in your HTML template having defined basic tag structure in template and providing value's to the placeholder from JS side.
Ex:
<div>
<div data-dojo-type="dojox.layout.contentpane" >
{content}
</div>
</div>
OR
You may also modify some HTML template dynamically from "postMixInProperties()"
Refer to Widget Life cycle to get some info on that
http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html
Related
I'm using the gulp-html-i18n gulp plugin for handling the translations task in a static website.
In order to display the translated content, I should use the Moustache lib as gulp-html-i18n mentioned in his doc.
I'm facing difficulties in the concatenation operations. For example, if I need to assign a conditional class for a html element, I will use the following flow:
${{! if}}$
${{#index.isEnglish}}$
<body class="en">
${{/index.isEnglish}}$
${{! else}}$
${{^index.isEnglish}}$
<body class="sp">
${{/index.isEnglish}}$
In the code above, I'm checking if the language is English, for example, then the class is assigned based on the isEnglish value.
By this approach, we will face a big problem if I need to add new language also it's long and not comprehensive.
Moreover, let suppose I have an array of objects in the following interface:
"data":[{
"title": "foo",
"description": "bar",
"icon": "iconname"
},...]
What if I need to concat the icon name with the scr attribute path while looping through the array above?
<div class="content">
${{#index.home.services.data}}$
<h3>
${{title}}$
</h3>
<p>
${{description}}$
</p>
<img src="path/${{}}$.png" alt=""> ---> Not working with Moustache
${{/index.home.services.data}}$
</div>
So how can I solve the problems above? and what is the best practices for the Moustache.js concatenations?
Sloved!
Solved by using scripts of type text/template.
We can't do the concatition operator directly inside a html attribute, We should write it inside a script of type text/template. like the following example:
<script type="text/template" id="header">
${{#index.pages}}$
<button>
${{title}}$
</button>
${{/index.pages}}$
</script>
Then render the script content and assign it to specific html element using the following javascript code:
var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate);
$('#navBar').html(headerHtml);
Note: The dollar signs are used based on gulp plugin for localization task gulp-html-i18n
in order to link the json file to mustache.
If I'm not using the mentioned plugin I must update my code to become:
var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate,'path to data');
$('#navBar').html(headerHtml);
One of the most helpful link here.
I would like to know if it is possible to do something like:
<todo>
<div class="greetings">Hello, world!</div>
<script src="/path/to/my/file.js"></script>
</todo>
The tag would keep the view (html) while the js code stays in a different file:
todo.tag (html/css)
todo.js
To give an alternative to the mixin solution, here is another way of splitting up your markup from your logic.
Take a look at this Plunker (a colleague of mine wrote this). The key part is the way you reference the tag function. <script>todoTag.call(this, this.opts);</script>. In this case, the todoTag is a global function. But nothing stops you from name spacing that function or use some form of module loading.
From the plunker:
todo.tag.html:
<todo>
<!-- your markup -->
<script>todoTag.call(this, this.opts);</script>
</todo>
todo.tag.js:
function todoTag(opts) {
// your logic
}
After looking into it i found that it is possible to separate the js from the tag file by using mixins. So, we would have something like:
<dropdown>
<select>...</select>
<!-- more html code here -->
this.mixin(Dropdown);
</dropdown>
The Dropdown instance will be in dropdown.js and the tag in dropdown.tag.
Hope this helps.
I've found another option to separate the js code from the tag by using a regular js constructor, like this:
<dropdown>
<!-- html code -->
<script>new Dropdown(this)</script>
</dropdown>
then we can just have
function Dropdown(tag) {
// constructor code
}
and
Dropdown.prototype = { ... }
as usual
I use angularJS and kendo.
How setup template (separated) for chart tooltip ?
<div id="buildLogChart" kendo-chart
k-tooltip="{ visible: true, template: '#TooltipTemplate' }">
</div>
You can use k-tooltip="tooltipOptions" where on your controller define $scope.tooltipOptions then you can simply set the template from your controller like for example
$scope.tooltipOptions = {
visible :true,
template : "<div id='testId' class='testClass' style='font-size:15px;'>\
<div>${series.name}</div>\
<div>${series.color}</div>\
<div>${value}</div>\
</div>"
};
Explanation :
You can pretty much use id class or inline css to suit your styling(the content of the tooltip)
needs
The list of information you can acess from within is listed here
Dont forget to add '\' if you intend to create a multiline otherwise
you need to finish it in 1 line(bad for readabilty though)
And Finally here's
DEMO
Also if you want to put it on separate file (i'm not sure if i got your question 100%), you can use kendo template by creating a page and add a kendo template script
<script id="customTooltipTemplate" type="text/x-kendo-template">
<div id='testId' class='testClass' style='font-size:15px; color:black; background-color:white;'>
<div>${series.name}</div>
<div>${series.color}</div>
<div>${value}</div>
</div>
</script>
Then import/link the file to your controller then you can use it like :
$scope.tooltipOptions = {
visible :true,
template : kendo.template($("#customTooltipTemplate").html())
};
And Finally here's
DEMO
NOTE: i'm not creating it on a separate file because i obviously can't do it here on kendo dojo, but this kendo template can be placed on other page but you need to import/link the file to your current file first. Read more about kendo template here
I am new to angular and we are converting a set of screens based on jsp to angular. Initially we have written lot of code in Jquery. Converting them to angular is tedious task and thought of trying to see if we can make jquery work with angular. Here is teh code snippet that i am trying to make it work while it in Jquery.
$(document).ready(function() {
$("#ClickTask2").click(function() {
$(".ClickTask1").hide();
$(".ClickTask2").show();
});
});
Above is the piece of code I have in JQuery and i tried to make it work.
angular.element(document).ready(function() {
$("#ClickTask2").click(function() {
$(".ClickTask1").hide();
$(".ClickTask2").show();
});
});
Can anyone tell me how i could make it work with minimal changes to the above one and rest of the jqueries?
You can convert many jquery features over to Angular by simply changing the $() method to angular.element() e.g.
$('#output').html('<h1>Title</h1>');
You could convert this to:
angular.element('#output').html('<h1>Title</h1>');
However not all function work, and some are renamed e.g.
$("#output").click(function() { console.log('Hi'); });
Would need to be changed to:
angular.element('#output').on('click', function() { console.log('Hi'); });
You can find a full list of the supported functions here:
https://docs.angularjs.org/api/ng/function/angular.element
like said Luis Masuelli on the comments read the basis of Angular. a quick lesson
app.js
function TaskCtrl($scope) {
$scope.selectedTask = null;
$scope.tasks = [/* ... */];
$scope.onClickTask = function(task) {
$scope.selectedTask = task;
}
$scope.isSelected = function (task) {
return task === $scope.seletectedTask;
}
}
$scope it is a special variable, it is injected by Angular to controllers and serves to communicate the controller with the view among other things. A controller can be any function and the name does not matter.
main HTML
<ul data-ng-controller="TaskCtrl">
<li data-ng-repeat="task in tasks" data-ng-click="onClickTask(task)">
{{task.title}}
<div data-ng-show="isSelected(task)">{{task.description}}</div>
</li>
</ul>
data-ng-controller tells to Angular "this is the controller" for this tag and her children. The other directives are pretty explanatory, but the documentation you left it more clearly.
Of course I am assuming that your tasks has the following structure:
{
title: "...",
description: "..."
}
in your html you need include the angular.js, the previous js and a directive to tell angular that this is a application
<!DOCTYPE html>
<html>
<head></head>
<body data-ng-app>
<!-- main HTML -->
<script src="angular.js"><script/>
<script src="app.js"><script/>
</body>
</html>
the data- prefix on each directive is not necessary but as angular "extend" HTML and these are not native attributes, I use them to place custom attributes as "ng-repeat", "ng-controller", "ng-app" etc. They are called directives
Remember, with Angular you need not manipulate the DOM directly as is done with jQuery, except for some special exceptions
I have a template based dojo widget, and a HTML template for it, in a separate .html file.
The Dojo Widget:
define("dojow/SomeWidgetName",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyHTMLFile.html"], function(declare, _WidgetBase, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template,
baseClass: 'dojowBaseClass',
details:{} // THIS IS THE OBJECT THAT WILL BE LOOPED
// your custom code goes here
});});
The HMTL template:
<table>
<tr>
<td>SomeService</td>
<td>someUsername</td>
</tr> </table>
What I need is to repeat the row of the table based on the "details" object I am having inside the dojo widget, so each row contains data from that object. Is that possible?
Thanks.
As far as I know: no. The templating language of Dojo is very basic and just offers attach points/events that you can use to programmatically change it. It's one of the shortcomings/weaknesses of Dojo (compared to templating engines like Handlebars), even ex-core-commiters think that way.
So, an alternative approach to create a loop structure is programmatically creating one. Let's say our template is the following:
<ul data-dojo-attach-point="listNode"></ul>
Then you can do the following in your code:
domConstruct.create("li", {
innerHTML: "test"
}, this.listNode);
That will result in the following HTML:
<ul data-dojo-attach-point="listNode">
<li>test</li>
</ul>
So you can put that inside a loop in your code (and create many child items), but as you can see, the template language itself is lacking such a feature.
If you want to load "a template", you can define a child item template, and load it using:
domConstruct.place(lang.replace("<li>{text}</li>", {
text: "test"
}), this.listNode);
Small note: The dojo/_base/lang is inconsistent with the widget templating. Placeholders in a templated widget are written like ${placeholder, but in dojo/_base/lang a placeholder is defined as {placeholder} (without the dollar sign).