I am trying to use a single smarty template in both PHP and JavaScript. This works great but I'm trying to figure out how I can use an {include file=""} tag in the template when the JavaScript side expects an element ID and the PHP side expects a file path?
Do the element IDs have to match the path I will use when on the PHP side?
OK I worked out how to do this, I overwrote the js prototype method for jsmart that requests a template by id:
jSmart.prototype.getTemplate = function () {}; // Add your method here
That way I can control what to do with the id including mapping it to a template element with a different ID from the passed path.
I know this question looks old, but would like to answer your question since I came across this question via Google and may happen with many others.
xyz.tpl - Template to be included.
Hello {$name}
pqr.tpl - parent template.
There you see the message
{include file='./xyz.tpl'}
Now in Javascript section of a web page define
jSmart.prototype.getTemplate = function (name) {
// Load template content here of template 'name' via ajax or DOM. Say here in the e.g. it would be './xyz.tpl'.
};
Now just call the parent template
<script>
var tplData = <content of pqr.tpl>; // You can load data in this via ajax or from DOM.
var tplObj = new jSmart(tplData);
var output = tplObj.fetch({'name': 'World'});
alert(output);
</script>
Source:-
https://github.com/umakantp/jsmart/wiki/Include-Templates
Related
I am using ajax data to pass info to my page, but I need to create some links that use data from the javascript to call a view, so the parameters usually passed when one does a {% url 'jobs:close' foo %}, for example, are not available at the time the template is rendered, but imported later through an ajax call. Obviously, this causes errors when the template is rendered.
Is there a way to keep the benefit of having reverse url lookups in such a situation, and dynamically get the URL in the template without passing foo, or do I need to hard code the URL in the template and paste the parameter on the end later?
Instead of getting 'foo' in ajax response, get the reverse url in ajax response and replace the DOM where you need the url.
After thinking about it, and looking at comments, I decided on the answer of adding a fake parameter and removing it afterwards. Since it will be removed when the form is rendered, the parameter doesn't much matter. I chose 1.
So, in my template, I put {% url 'jobs:close' '1' %}. Then in my javascript, as I call the form in a modal, I use jquery to find the form. It makes it easy just to use the same URL again, so here it is:
var modal = $("#modal");
var closeUrl = '{% url 'jobs:close' '1' %}';
closeUrl = closeUrl.substring(0, closeUrl.length - 2) + event.data.id + /;
modal.find("#close-job").attr('action', closeUrl);
event.data.id is where I am storing the job ID that I really need.
It isn't as slick as I was looking for, but it works well.
I'm filling my WebApp (Django) template variables in html body data attributes. So that I can access them later through Javascript:
<body data-node_ip={{NODE_IP}}>
<body data-node_port={{NODE_PORT}}>
Later in the Javascript code, I'm accessing the variables through jQuery's data method:
var connection = $("body").data("node_ip") + $("body").data("node_port")
This works well with all modern browsers (IE10, Chrome, FF).
Problem:
However it doesn't work with IE9 or older. IE9 only stores one single value associated to the tag.
My question:
How do I store these template variables in my HTML document (without using Javascript / jQuery) so that they are also accessible down to IE9?
Thanks!
This doesn't seem to be valid. You can only have one body element. But you can and should put all the attributes on that single element:
<body data-node_ip={{NODE_IP}} data-node_port={{NODE_PORT}}>
Why don't you assign them different ids and access them like this:
var connection = $("#body1").data("node_ip") + $("#body2").data("node_port")
I'm beginning to use Marionette within an existing backbone application. I've got some HTML which I want to append into a region. In pure backbone, I could just do this.$el.append(html_code) and that was all. As far as I can see, marionette regions allow only to operate on views (which have to implement the render method). Calling append on marionette region throws 'undefined method' errors.
Is it possible to attach plain HTML to a marionette region?
No, it's not possible to inject plain html into a Marionette.Region.
Theoretically you could access a regions DOM element with someRegion.el or someRegion.getElement(), but this must be done after rendering (which at least isn't possible inside a Marionette.View with standard behaviour).
But you can achieve the desired result by using a specially crafted Marionette.ItemView:
#someRegion.show(new Marionette.ItemView({template: '<h1>gach</h1>'}));
You maybe also should have a look at Marionette.Renderer .
a Marionette ItemView will look for a template and will call render on that template, so when you show the view in the region the html will be displayed just fine with out the need of you defining a render method.
MyImtemView = Backbone.Marionete.ItemView.extend({
template : "#myTemplate"
});
var myItemView = new MyItemView();
myLayout.aregion.show(myItemview);
this should work if you save your html in a template like this
`<script id="myTemplate" type="text/template">
<div><p>your html<p>
</div>
`
EDIT
you can also declare a render function in your view in case you need to generate and modify your html like this.
MyImtemView = Backbone.Marionete.ItemView.extend({
template : "#myTemplate",
render : function (){
this.$el.append(HMTL); //so here you work your html as you need
}
});
var myItemView = new MyItemView();
myLayout.aregion.show(myItemview); //the render function of your view will be called here
I ran into the same problem and tried the answers explained here, but I'm also using require.js and kept getting an error for the #my_view template not being found. If anyone can clarify where does Marionette look up the templates by default, that would be great.
Instead, I solved it by using the text.js plugin for underscore.js. This way you actually can use a plain html file as the template, without the need for nesting it in a script tag. Here's how I did it.
define(['backbone', 'underscore', 'marionette', 'text!tmpl/my_view.html'], function(Backbone, _, Marionette, view_t){
var MyView = Backbone.Marionette.ItemView.extend({
template : function(serialized_model) {
//define your parameters here
param1 = erialized_model.param1;
return _.template(view_t)({
param1: param1
});
}
});
return MyView;
});
I placed the text.js plugin in the same lib directory as all my other js libraries and my main.js for require declares the path to the templates as
'tmpl': '../../templates',
My project structure looks like this
root
index.html
js
main.js
app
App.js
views
MyView.js
lib
require.js
text.js
backbone.js
underscore.js
jquery.js
backbone.marionette.js
templates
my_view.html
My template 'my_view.html' simply looks like this.
<h1>THIS IS FROM THE TEMPLATE!!!</h1>
Worked perfectly. I hope you find it useful.
Using a view
var myHtml = '<h1>Hello world!</h1>';
var myView = new Marionette.ItemView({template: _.constant(myHtml)});
myRegion.show(myView);
Marionette.Renderer.render takes either a function or the name of a template (source code). _.constant creates a function that returns the passed-in parameter.
Attaching HTML
Alternately, the docs for Marionette.Region mention overriding the attachHtml method, see Set How View's el Is Attached.
I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do :
function ArticleListCtrl($scope, $http) {
$http.get('/articles/?format=json').success(function(data) {
$scope.articles = data;
});
}
But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!
If I understand correctly, what you need is to define a partial template and a route,
for the detail view of your article.
An example is here
More specifically what you'd need is something like the following.
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
otherwise({redirectTo: '/articles'});
}]);
What the above does, is to hijack urls of the form /articles/5/ and instead of actually
performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled
by your ArticleDetailCrtl controller.
In your ArticleDetailCrtl controller function, don't forget to include the $routeParams
service. This will give you access to the url parameters, such as articleId, which we
defined above.
The final thing to do is to generate these links in your article list template. e.g:
<ul>
<li ng-repeat="article in articles">{{article.title}}
</ul>
I am creating an email engine in mvc3 and I am trying to use razor views as email templates.
I heard this is possible but I have not yet found any information about it.
You can use http://razorengine.codeplex.com/ to achieve this. It allows you to use razor outside of mvc.
string Email = "Hello #Model.Name! Welcome to Razor!";
string EmailBody = Razor.Parse(Email, new { Name = "World" });
It's simple to implement and it's available on http://nuget.codeplex.com/ for easy integration into your projects.
You CAN use a template file to serve as a razor email body template. You can use whichever extension you choose because you can load a file as text in .Net. Let's use the following example for the template:
Hello #Model.Name,
Welcome to #Model.SiteName!
Regards,
Site Admins
Save that file as something like "WelcomeMessage.cshtml", "WelcomeMessage.template", etc. Select the file in Solution Explorer and in the Properties window, select "Copy to Output Directory" and choose "Copy Always". The only down point is that this template has to accompany the application and doesn't compile as a class.
Now we want to parse it as a string to assign to a mail message body. Razor will take the template and a model class, parse them, and then return a string with the necessary values.
In your application you will need to add the RazorEngine package which can be found with NuGet. Here's a short code example to illustrate the usage:
using System.IO;
using RazorEngine;
// ...
MyModel model = new MyModel { Name = "User", SiteName = "Example.com" };
string template = File.OpenText("WelcomeMessage.template").ReadToEnd();
string message = Razor.Parse(template, model);
It's similar to the other answers but shows a quick way to load the template from a text file.
You should perhaps consider MvcMailer. RazorEngine is (very) good if you aren't already using MVC (I've used it successfully in a webforms context), but if you have MVC you may as well take advantage of it.
(via Hanselmen's NuGet package of the week 2)
You can also use Essential Mail: Razor package from NuGet. It is build over RazorEngine and provides simple interface for email rendering.
Email message template looks something like
#inherits Essential.Templating.Razor.Email.EmailTemplate
#using System.Net;
#{
From = new MailAddress("example#email.com");
Subject = "Email Subject";
}
#section Html
{
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>HTML part of the email</h1>
</body>
</html>
}
#section Text
{
Text part of the email.
}
Read more on GitHub: https://github.com/smolyakoff/essential-templating/wiki/Email-Template-with-Razor
Mailzor
Linked to what #thiagoleite mentioned, I took Kazi Manzur Rashid's idea (with permission) and extended in to be more friendly for how I wanted to use it.
So check out the github project 'mailzor'
It's also up on Nuget.org/packages/mailzor