EzDevInfo.com

Store a jsRender template in a separate js file

Is it possible to store a jsRender template in a separate file?

I want to store it in a separate file and make a reference of it in my page.

something like this

<script id="templateName" type="text/x-jsrender" src="thisIsTheTemplate.js"></script>

I will apreciate any commemnts or suggestions.

Thanks

Accessing a global javascript variable inside jsrender template and updating it

I am trying to update a global javascript variable with a value from jsrender template. How can I accomplish it...

i have created a fiddle http://jsfiddle.net/4RH7n/8/

i need to have the last movie name into that javascript variable..

jQuery templating engines

I am looking for a template engine to use client side. I have been trying a few like jsRepeater and jQuery Templates. While they seem to work OK in FireFox they all seem to break down in IE7 when it comes down to rendering HTML tables.

I also took a look at MicrosoftAjaxTemplates.js (from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766) but turns out that has the same problem.

Any advice on other templating engines to use?

Using the Cassette V2 to compile templates jsRender and KnockoutJS templates

I am moving to version 2 of the Cassette.

But I found nothing on the web to help me configure my Cassette to compile HTML templates.

Templates

Some templates jQuery Templates as:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="header" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="header">${header}</h3>
    </div>
    <div class="modal-body">
        {{html body}}
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">${CancelText}</button>
        <button class="btn ${ClassBtn}">${ConfirText}</button>
    </div>
</div>

I will modify them for use jsRender soon!

Others as KnockoutJS

<div class="span2">
    <div class="data-block">
        <h4 data-bind="text: Total"></h4>
        <h6>
            <span data-bind="text: Passo.Nome"></span>
            <small class="muted" data-bind="text: Passo.Responsavel">Riderman de Sousa</small>
        </h6>
    </div>
</div>

IConfiguration<BundleCollection> class

bundles.AddPerSubDirectory<HtmlTemplateBundle>("HtmlTemplates", b => b.Pipeline = ??? );

How to realize screens / views with JavaScript / Jquery easily?

I'm sure I'm missing something pretty basic, but I have just started to get myself up to speed on jQuery and Javascript programming. Previously I was doing server side programming with PHP. I'm now in the middle of creating a prototype for HTML5 webapp, where I would like to have different screens. Now with PHP that was pretty easy, I could just used server side templates like Smarty and be done with it.

However to make my app more webapp like, I would like to dynamically change between screens without having to reload the window.

I have looked into several options that might be anwsers to my question, but I'm not sure whether I'm on the right track.

I have checked for example JsRender, JsViews or even the pure jquery load command. But what I'm not sure is whether these things would allow me to have something like this:

HEADER_PART
MAIN_CONTENT
FOOTER_PART (also contains links to common JS files that I use)

I would like to dynamically update the MAIN_CONTENT part. Currently my application is only one page, and all my custom logic that belongs to that page is in one JS file. In this JS file, I use a simple $(function() { ... to load my page, so whenever it gets loaded, parts of my page get updated asyncronously. This is fine, since all my blocks in this certain page would have to be loaded when that one page gets loaded.

But what if I have a link, like main.html#otherscreen, and when I click that screen, I would like to change my MAIN_CONTENT and also run another page load specific JS that handles blocks on that other screen, not the first page?

I know I could still use probably server side templating and load my pages using AJAX requrests, but again, not sure whether that is the right approach.

Could you please enlighten me? :)

Thanks & best regards, Bence

jQuery.append, type input, and Windows Store App (HTML/CSS/JS)

I have this Window Store App where I'd like to add some markup dynamically, and my problem can be boiled down to this:

Working

$('.some-element').append('<input type="radio"><label>Test</label>');

Not working

$('.some-element').append('<input type="radio" name="test"><label>Test</label>);

Visual Studio tells me that:

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.

And points to a line in jQuery's append implementation:

append: function() {
        return this.domManip(arguments, true, function( elem ) {
            if ( this.nodeType === 1 || this.nodeType === 11 ) {
                this.appendChild( elem ); // Here!
            }
        });
    }

Does anyone know if theres a way around this? (I need jQuery because I want to use JsRender as my templating engine).

JsRender - How to render template from within template?

How can I render a template from within a template in JSRender? In the previous jquery template, I could use

{{tmpl(Languages) "#languageTemplate"}}

In JSRender, I could find template composition examples in conditional statements and loops. I want to call the template independently.

KnockoutJs, third party templating library, JsRender

Is Knockout compatible with the latest JsRender release in terms of getting it to work with the template binding?

//Daniel

jsRender loop a List

A question on the {{for}} loop in jsRender.

The demo shows we can loop through a collection of complex objects and display their properties:

{{for languages}}
    <div>
        <em>{{>name}}</em>
    </div>
{{/for}}

But what if my languages is only a List<string>? There will be no {{>name}} to be displayed. How can we reference the individual string values?

Thanks.

JsRender: How to pass variables into a nested template

I want to use a nested template in different parts of my webpage. For the different parts I need to get a value from an array within the nested template. I cannot use a for loop because each part has different class and position on the website. Is it possible to pass a variable into the nested template? The following code simplifies what I am trying to achieve:

<script id="myBtnTmpl" type="text/x-jsrender">
    <button class="btn">        
        {{:myData.myArray[INDEX_VARIABLE].btnName}}
    </button>
</script>

//  Here I want to use INDEX_VARIABLE = 0
<div class="BigButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

//  Here I want to use INDEX_VARIABLE = 1
<div class="MediumButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

//  Here I want to use INDEX_VARIABLE = 2
<div class="SmallButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

Another question: When using nested templates is it possible to include nested templates like this {{tmpl="myBtnTmpl"/}} without the if syntax?

Thanks!

Choosing the fastest template plugin for data table

I recently changed our asp.net gridviews (which worked with update panels) to HTML tables, using jquery-Ajax and templating using jtemplates. The performance improvement was huge!!! (on the server side I am using a generic httphandler). One performance problem I am dealing with occurs on Firefox, because of the jtemplate plugin. Somehow it takes F.F to render a 20 rows template up to 3 seconds!!! (on I.E or chrome it takes about 100ms). Which is the preferred templating plugin, when my goal is mainly simplicity and performance? I am trying jsrender, which is fast, but not documented enough(I had some problems doing things inside a for loop). Knockoutjs seems great but is pretty sofisticated and I am afraid of performance problems as well. Thanks!!!

How to set comment in jsrender

When I use jsrender template engine, I want to put some comment in code, but I couldn't find tag for comments.

I know that I can use html comments, but I don't want those comments to be rendered on html at all, so <!-- --> is out of option.

So, what I want to have is:

<script id="row-template" type="text/x-jsrender">
{{// some comment that will not be rendered}}
{{if #data[0]}}
  <tr>
    {{for #data tmpl="#some-template"/}}
  </tr>
{{/if}}
</script>

jsRender Rendering HTML

I'm using jsRender to render my data on html page. The data gets rendered perfectly. However, in some content items, HTML text (like hyperlink) appears as text. In jquery template, there is a way to render HTML by {{html. Is there anything similar available in jsRender? My code is as follows:

<p>
{{ =Status}}   //need to convert this to HTML so it should appear as hyperlink.
</p> 

Thanks.

is it possible to have a for loop in JSRender with incremental variable i?

i have template (an html file) with is getting renders with JSON data using JSRender.

My Sample Template is as follows

<ul id="membersList">
  {{for UserConnection}}
        <li>
        <div>
            <a title="{{:Fullname}}">
            <br />
            <img src="sample.png"/><br />
            {{:Fullname}}</a>
        </div>
        </li>
    {{/for}}

My Json data is

[
{
    "ApplicationName": "appone", 
    "Title": "Title one", 
    " UserConnection ": [
        {
            "Id": 210, 
            " email ": " abc1@xyz.com ", 
        }, 
        {
            "Id": 0, 
            " email ": " ", 
        },
        {
            "Id": 211, 
            " email ": " abc2@xyz.com ", 
        }
    ]
}

];

Now my requirement is the i should hide of div if in particular the 2nd item of the JSON has the its id value as 0.

Is it possibel in JSRender to check some thing which we do in c# like

for (i = 0 ; i < 10 ; i++)
{
  if (userConnection[i] = 0)
      // show the div
  else 
     // dont show

}

i.e. if i can access UserConnection[i] even in JSRender, then i can show or hide the div. Is it possible?

Current state of JavaScript template engines?

I did some research months ago looking for a nice javascript template engine and settled on one made by Trimpath.

I like this a lot, but I have a few wish list items:

• The code is rather big. I'd love something tiny, like John Resig's template engine, but easier to use.
• I'd like support for includes, and django-style inheritance.

Are there any other great template engines which have been released in the past year or so which I should know about?