Client side templating with unknown variables - javascript

Our company has an intranet consisting of several e-mail templates filled with variables (like [[NAME]], [[PROJECT]] and so on). I was thinking of implementing some sort of client side templating to make it easier to replace these variables with actual values.
The problem is that among all the client side template solutions I've located so far, all of them seem to assume that the JS code knows all the template variables that exist in the markup, and none of them seem to be able to fetch a list of variables defined in the markup.
Does anyone know of any solutions/plugin which makes this possible?
Thanks in advance!

Can't you just use some simple regex?
var variables = mycontent.match(/\[\[(.*?)\]\]/g);
I set up a demo here, so you can see it in action.

If set of templates are already cached on client and available to customer on demand and each template will have it own set of information to be replaced in (either hardcoded or define on runtime). Then we can go for some generic solution
Pseudo code
- Decide which Template now need to render
- Send a Ajax command of array of variables in to be replace in the template
[{var_name:"%project_name%",var_value:"Project" },{var_name:"%superviser%",var_value:"Its me :)" }]
- Write a generic code that loop through json array and replace the var_name with the template source
Check this - http://api.prototypejs.org/language/template/

Related

how does data-render attribute works in javascript

Can anyone explain the functionality of data-render="true" attribute works in javascript and how to use it in javascript?
I believe what that would be is a data attribute. I am not sure if this is the main use, but I know it makes sending data from html to javascript very easy. Data Attributes
I used it in a project when ids for a table were created at runtime, and depending on the row clicked on, grabbed the data attribute.
To go to your question, I believe that is what is happening with the data-render. It is just a "variable" to store a boolean in a sense.
In HTML5 specification, you are allowed to create attributes into your tags.
The specification recommends that you use some naming guidelines to create your own tags, thus as using something like "data-[some namespace to define your project]-[attribute_name]"
You can access those attributes in js, and load them with data when your server returns the page to the client. These type of attributes allow you to communicate data between server and client codes in a quite simple and clean way.

Best way to pass server (c# / Razor) values into an AngularJS app

We use DNN and often need to pass a few context specific values (like page id or module-on-page-id) into an AngularJS app. We've developed our own conventions how to do this, but would like to hear from others how they approach this to find a best practice.
So basically the situation is that the server-page has information needed by the JS. Using WebAPI is not an option, as these values are known in the page, but not in a separate request. Things I've seen so far have been:
Use in-view-razor like href="#Tab.TabId/{{...}}" (I don't like this)
Place the values in the ng-init like ng-init="config = { prop1: '#Tab.TabId' }"
Create a separate <script> tag where we generate a module on the fly containing these values so angular.module("config", []).constant('prop1', '#Tab.TabId')
Create a json with razor in the page somewhere and inject all of it as a module into the app using a generic code which does the same as #3, just with cleaner code re-use.
I've seen all these and have also used all. Currently we avoid #1 as we believe it's not good to mix templating languages and because it doesn't allow externalizing parts of the view. So basically we use #2 as for quick-and-simple (and a bit dirty) + #3/#4 for larger projects.
Do you have a better way, or which way would you prefer?
We are using variant #4.
This has the advantage that the JSON defines the exact interface for the config needed by the JS module. And Razor is great to generate URLs using #Url.Action.
we use NewtonSoft and do JSONConvert.SerializeObject(ObjectName) and then pass it over as a Session from the controller and then use #Html.Raw(ObjectName) and its a JSON Object that can be utilized easily in javascript...

Angular $sce vs HTML in external locale files

A question regarding ng-bind-html whilst upgrading an Angular app from 1.0.8 to 1.2.8:
I have locale strings stored in files named en_GB.json, fr_FR.json, etc. So far, I have allowed the use of HTML within the locale strings to allow the team writing the localized content to apply basic styling or adding inline anchor tags. This would result in the following example JSON:
{
"changesLater": "<strong>Don't forget</strong> that you can always make changes later."
"errorEmailExists": "That email address already exists, please sign in to continue."
}
When using these strings with ng-bind-html="myStr", I understand that I now need to use $sce.trustAsHtml(myStr). I could even write a filter as suggested in this StackOverflow answer which would result in using ng-bind-html="myStr | unsafe".
Questions:
By doing something like this, is my app now insecure? And if so, how might an attacker exploit this?
I can understand potential exploits if the source of the displayed HTML string was a user (ie. blog post-style comments that will be displayed to other users), but would my app really be at risk if I'm only displaying HTML from a JSON file hosted on the same domain?
Is there any other way I should be looking to achieve the marking-up of externally loaded content strings in an angular app?
You are not making your app any less secure. You were already inserting HTML in your page with the old method of ng-bind-html-unsafe. You are still doing the same thing, except now you have to explicitly trust the source of the HTML rather than just specifying that part of your template can output raw HTML. Requiring the use of $sce makes it harder to accidentally accept raw HTML from an untrusted source - in the old method where you only declared the trust in the template, bad input might make its way into your model in ways you didn't think of.
If the content comes from your domain, or a domain you control, then you're safe - at least as safe as you can be. If someone is somehow able to highjack the payload of a response from your own domain, then your security is already all manner of screwed. Note, however, you should definitely not ever call $sce.trustAsHtml on content that comes from a domain that isn't yours.
Apart from maintainability concerns, I don't see anything wrong with the way you're doing it. Having a ton of HTML live in a JSON file is maybe not ideal, but as long as the markup is reasonably semantic and not too dense, I think it's fine. If the markup becomes significantly more complex, I'd consider splitting it into separate angular template files or directives as needed, rather than trying to manage a bunch of markup wrapped in JSON strings.

Passing a JSON object to a remote LESS compiler to use as LESS variables

I have an admin panel where users customize the look of a static website (mostly fonts and colors). This panel generate a JSON object with the user values. What I would need to do is passing this JSON to the LESS compiler, so that it can dynamically generate a CSS file from a LESS one using the JSON content as LESS variables. The filename should be different every time, something line file-ID.css (the ID is for the user and it could be passed via JSON too).
Is it technically possible (without extending LESS)? I noticed, for example, that you can pass functions to the parser object when you create it, could I use this functions to evaluate the JSON and passing the variables to the compiler?
Obviously I don't need to know the details, just if it is doable and possibly some link to related information if you have it.
Thanks in advance.
The best way I've found to do what I was trying to accomplish was to use a server side LESS library like PHPLESS to parse the variables from the JSON before compiling. Regular LESS compiler doesn't allow to dynamically inject variables.
To my knowledge the LESS compiler doesn't support any other input than LESS. It would be trivial to make your own pre-parser that mixes-in the variables from JSON .. not even a parser, more of a string-replacer.

Adjust static value into dynamic (javascript) value possible in Sharepoint allitems.aspx page?

<SharePoint:SPDataSource runat="server" IncludeHidden="true" SelectCommand="<View><Query><OrderBy><FieldRef Name="EventDate"/></OrderBy><Where><Contains><FieldRef Name="lawyer_x0020_1"/><Value Type="Note">F. Sanches</Value></Contains></Where></Query></View>" id="datasource1" DataSourceMode="List" UseInternalName="true"><InsertParameters><asp:Parameter DefaultValue="{ANUMBER}" Name="ListID"></asp:Parameter>
SharePoint WSS 3.0
This codeline is just one line of the allitems.aspx of a sharepoint list item (SharePoint created it himself). It only displays items where lawyer 1 = F. Sanches. Before I start messing around with the .ASPX page I wonder if it possible to change F. Sanches (in the code) into a dynamical variable (from a javascript value or something else that can be used to place the javascript value in there dynamically). If I put any javascript code in the line it will not work.
P.S. Ignore ANUMBER part in code.
Let say to make it simple I have javascript variable like this (now static but with my other code it is dynamic). It would be an achievement if it would place a static javascript variable.
<SCRIPT type=text/javascript>javaVAR = "P. Janssen";</script>
Eventually I would like to filter with OR operator
If Yes --> how?
If No --> Thank you!
The easiest way to add a filter to a standard list view is to use query string filters - add
?FilterField1=Lawyer&FilterValue1=F. Sanches
to the url. If you are working with a note field, it probably won't work directly, but you may find it easier to set up a field that does work than to make the server side chages you would need to modify the query directly.
Another approach that might work would be adding filter web parts to the page - I haven't worked with those much myself, but in theory they should be able to do what you want.
I don't think JavaScript will work since JavaScript is client side and SPDataSource is server side.
However, you should be able to use a control via ControlParameter. There are good examples here and here. Once the parameters are working, OR operators will definitely be supported within the CAML of the SelectCommand.

Categories

Resources