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).
Related
I'm creating an Angular 2 webpage - I originally had 1 HTML file that contained everything I needed for my web page's UI - for design reasons, I've taken out a part of the HTML and created a separate component for it (specifically a Tree view display). I've been able to reference the other HTML file (treeview) fine using its selector tree-selector in my original HTML like so:
<div *ngIf="showTree">
<h1>Using treeview template.</h1>
<tree-selector></tree-selector>
</div>
The code for tree-selector.html is (I'm using PrimeNG UI components):
<p-tree [value]="fileSystemTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" (onNodeExpand)="nodeExpand($event)" [style]="{'max-height':'200px','overflow':'auto'}"></p-tree>
Before, when everything was in 1 file, it was easy to use the variable "fileSystemTree" to use for [value]. Now that I have two HTML files, I'm unsure of how to use fileSystemTree again in my main HTML and link it to [value] in tree-selector.html.
Pass it to <tree-selector></tree-selector> as input parameter and then further to <p-tree...>
<div *ngIf="showTree">
<h1>Using treeview template.</h1>
<tree-selector [fileSystemTree]="fileSystemTree"></tree-selector>
</div>
in tree-selector component:
#Input() fileSystemTree: any;
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
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
How does one localize a pure front-end application that uses a framework such as Kendo UI ?
I mean, it's possible to do something like this:
$(document).ready(function(){
$("#myText").html(<grab text based on language>);
});
But then, if I have a listview and want to localize its title:
<div id="tabstrip-expenseaccounts" data-role="view">
<ul data-role="listview" data-style="inset" data-type="group">
<li id="expenseaccounts-listview-title">
abcde
<ul>
...
</ul>
</li>
</ul>
</div>
Becomes:
...
<li id="expenseaccounts-listview-title" class="km-group-container">
<div class="km-group-title">
<div class="km-text">abcde</div>
</div>
<ul class="km-list">
...
</ul>
</li>
...
I need to inspect the generated code and do something like:
$(document).ready(function(){
$("#expenseaccounts-listview-title.km-group-container div.km-group-title div.km-text").html(<grab text based on language>);
});
It works fine, but that doesn't seem like a clean solution to me.
Any advice ? Thanks!
For KendoUI there some language packs available on GitHub here. This other stakoverflow question should give you a headstart. With this, all you have to do is use the correct language pack and you're good to go. And if there is no language pack for your specific case, you can always roll your own.
Hope this helps.
While I have not found a solution proper to Kendo UI, here is the approach I went for to localize my mobile application. Note here that I am not talking about localizing widgets, I am referring to localizing every static aspect of the application: input placeholders, texts on buttons, headings, etc.
My mobile application only has one file, index.html, and whenever I want to navigate to a different page, i simply move to a different view. Since having multiple views in the same file is kind of a mess, I made one html file per view, and am dynamically loading them into the body (index.html has an empty body). Before appending the html which is retrieved using $.get for each view (at this point, it's a huge string), i am replacing text based on the current language (which is retrieved from the localstorage/cookie or from a default value).
example:
In my localization library:
_localization.localizeText = function(text, arr){
arr.forEach(function(item){
text = text.replace(item.name, getLang() == 1 ? item.replacement.en : item.replacement.fr);
});
return text;
}
In my login.html file:
<button>$$login-button$$</button>
And then in some javascript file which is included before the script in which the application is initialized:
var replacements = [];
replacements.push({
name: "$$login-button$$",
replacement: {
fr: "Connecter",
en: "Log In"
}
});
And then when i'm loading my files into the body:
$.when($.get("login.html"))
.done(function(p1){
var body = $("body");
body.append(localization.localizeText(p1[0], app.replacements));
});
Hope this helps anyone with similar issues!
I am learning backbone.js and I have seen some examples like this one.Here the user has not written much html codes inside the editor.html.Only 4 lines of code.But for colour change,size change etc he has done inside editor.js
Please help me understand what all codes we need to keep inside .html file
<div id="page" style="width:2000px;height:2000px;">
<button id="new-rectangle">New Rectangle</button>
<button id="new-circle">New Circle</button>
</div>
You should aim to put all your html in .html file(s). As an app grows, it will help you to keep them separate. The example you link to is a 'simplified' version - this is not how you would structure things in an actual app. You would load html from templates in the render function. A (though this is also simplified as I am relying on script tags) pattern would be:
HTML file:
[...SOME HTML...]
<script type="text/html" id="template-contact">
<div class='contact'>
<h1>Here's my template code</h1>
<strong>name</strong>
<span>email</span>
</div>
</script>
Then in your Backbone view render function:
render: function() {
template: _template($('#template-contract').html(),
this.$el.html(this.template());
return this;
}
Then somewhere else in your Backbone code you create a new instance of the view and render it.
var example = new view_name();
example.render(); //This loads the html template
If you need to dynamically load the html from a server, you can use underscore (or whichever template engine you are using) tags in your template '<%>' and use models. This is best explained in Addy Osmani's book Developing Backbone.js Applications which, incredibly, is free. Here's the link to the relevant section
Whatever you wants to display on the browser you can keep it in .html file and logic to update the dom on run time should be in .js file.