codepb / jquery-template Goto Github PK

Think of a better way to support nested templates than having to populate one template, then populate the result with the nested template/s

Requirement to bind any attribute, not just the ones provided so far. Perhaps something like a "data-bind" attribute that accepts key value pairs for the attribute, and what to bind to.

Add support to be able to "watch" the data, and update the Template when the data bound changes. Try to implement this with native JavaScript objects being passed in without any method of polling the object. Determine which browsers this is possible in.

I'm using your plugin to loop through my template data to populate a Zurb Foundations Accordion http://foundation.zurb.com/docs/components/accordion.html

Each looped 'post' needs a unique ID, is there a simply way to get the current loop index?

Thanks in advance!

Hi, i will like to make a suggestion, (sorry my english), i'm currently having a problem at setting id to a element.. because i want to format de data in the element and at the same time make an specific id for that element (because im editing after clicking a button) so if you put the data-id as the first thing to process it will make it easier..
i.e.
i have a span tag and in there a data-content="active" (is true or false) so i've created a truefalseformatter with the following script:
trueFalseFormatter : function(value, options) {
if(value){
return "Activo";
}
$(this).removeClass('label-success').addClass('label-danger');
return "Inactivo";
}
everithing works fine, but i have no way of setting a special id for this tag.. (because its a table and every element will have the same id) so i've figured out that if you move data-id process at the top. you will have an id tag "pre-charged" with the id you wanted, so next you will simply have to do something like $(this).attr("id", "user_" + $(this).id);

if i have time i will like to make a modification to amake a data-specific-id="foo" and then take that value and append what i want, so this way i will never have a duplicate id..

Hope i explain my self!

regards!

Hi there,

I really like this jquery plugin, but unfortunately it is not available on bower (http://www.bower.io). Could you add it to bower for a simple dependency management?

Thanks!

Hey guys,

I think this may count as a bug. If you run your examples and run the search example, everything is OK by default, but if you change any of the prices property of the objects in the searchResults.txt file to 0.00, the entire template will fail to load.

For example take ....
{
"id": 3,
"name": "A blue mouse",
"price": 25.50,
"tags": ["blue", "mouse"],
"dimensions": {
"length": 3.1,
"width": 1.0,
"height": 1.0
},
"warehouseLocation": {
"latitude": 54.4,
"longitude": -32.7
}
}
and change to
{
"id": 3,
"name": "A blue mouse",
"price": 00.00,
"tags": ["blue", "mouse"],
"dimensions": {
"length": 3.1,
"width": 1.0,
"height": 1.0
},
"warehouseLocation": {
"latitude": 54.4,
"longitude": -32.7
}
}

will cause the issue. I think that it may also occur on null values also. The hack I put in to fix this is arounf line 312 of the javascript file.

if (value && dataBindFunction) {
dataBindFunction($this, value);
} else if (noDataFunction) {
noDataFunction($this);
}

I changed to
if ((value || value == 0 || value == '') && dataBindFunction) {
dataBindFunction($this, value);
} else if (noDataFunction) {
noDataFunction($this);
}

Thanks guys. This is an awesome project that has saved me on multiple occasions already is a big contribution to the community.

-Frank

I've managed to extend the binding with data-class option.
This should add one or more specific css classes to the template.
Just added the following to the bindData function before last statement:

processElements("data-class", template, data, settings, function ($elem, value) {
$elem.addClass(value);
});

maybe you could add this to your next release :)

Hi there,
I've got little problem here with duplicated content. Basically no matter of other input objects within iteration, loadTemplate is filling mainDiv object with duplicated value of first iteration.
Here's a piece of code:

    var TemplateClass = {

    mainDiv : $('<div>').attr('id',contentContainer),
    setData : function(result, images, template, link) {
        this.result = result;
        this.images = images;
        this.template = template;
        this.link = link;
    },

    readyTemplate : function(container) {
        var that = this;
        $.each(this.result, function (no) {
            console.log(this);
          $(that.mainDiv).loadTemplate(that.template, this, {
                prepend: true,
                afterInsert: function() {
                    if (no === that.result.length-1) {
                        $(container).prepend(that.mainDiv);
                    }
                }
            });
        });
    },

    clearTemplate : function(contentContainer) {
        this.mainDiv.empty();
    }
}

Console log is returning two different object's as expected. What seems to be the problem here?

Hi guys,
I don't want to commit this myself because I know it's messy and needs cleaned up but could someone add this function? The way I'm using it (and the way I imagine others will too. Is where a data value returns true, the "checked" attribute will be added to the element. To be used with check boxes and radio buttons.

processElements("data-checked", template, data, settings, function ($elem, value) {
if($elem.attr("type") == "checkbox" && (value == "true" || value == true)) {
$elem.attr("checked", "checked");
} else if($elem.attr("type") == "radio" && $elem.val() == value) {
$elem.attr("checked", "checked");
}
});

Hey there,
I'm searching for a way to add the property checked="checked" or disabled="disabled" if a variable is set to true. Is it already possible or does the plugin need a patch (would create one if wished).

Thanks!

I change processElements function. it is work

processElements("data-value", template, data, function($elem, value) {
    if($elem.is("select")){
        for(var i = 0, j = $('option',$elem).length; i < j; ++i) {
            if($('option',$elem).eq(i).val() === value) {
                $('option',$elem).eq(i).attr("selected","selected");
                $elem[0].selectedIndex = i;
                break;
            }
        }
    }
    $elem.attr("value", applyFormatters($elem, value, "value"));
});

Edit:
Test url: http://jsfiddle.net/misima/6QbKP/

Hi there,

I've started using this library and the templating part is working really well.

The weird thing I have is that if I use a script tag with a src attribute the template has issues and the jQuery function .children() doesn't work.

Here is an example, see the console output and expand the object, there are no children. If you insert the template in the main HTML doc it works great.

Any ideas?

Cheers,
Dom

File: test.html

<html>
    <head>
        <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
        <script type='text/javascript' src='jquery.loadTemplate-1.4.4.js'></script> </head>
    <body>
        <div id="output">

        </div>
        <script type="text/html" id="my_template" src="test.template.html"></script>
        <script type="text/javascript">
            jQuery(function ($) {
                $('#output').loadTemplate('#my_template',{div_id: "blah",message: 's\'up homes'});
                console.log($('#output').children());
            });
        </script>
    </body>
</html>

File: test.template.html

<div data-id="div_id" data-content="message">
</div>

Can you write 2 simple examples to demonstrate how to use data-options and data-template-bind with select boxes please?

Currently, to set an id attribute via loadTemplate, I have to use data-template-bind like so:
<script type="text/html" id="divTemplate">
<div id="" data-template-bind='[{"attribute": "id", "value": "divID"}]'></div>
<script>

Since setting an id is a fairly common use case (at least for me), I'd like to see a new data-id attribute which would reduce the above example to:

<script type="text/html" id="divTemplate">
<div id="" data-id="divID"></div>
<script>

My first call to loadTemplate works file, but when I call it again it gives an error saying "error loading template". Am I not supposed to call it only once? I have some content that is updated and want to reload the template to update the values.

Dhaval

Here's my code :

$(".simple-template-container").loadTemplate("templates/videos.html", 
                        data.videos, { overwriteCache: true, isFile: true } );

I'm wondering why because when debugging, overwriteCache is set to true...

Any idea ?

[EDIT]
Seems like i have to clear cache in Firefox to see changes...

I don't know if this is covered somewhere (please excuse me if this is the case).

I'm trying to use JqueryEasyTabs (http://os.alfajango.com/easytabs) for some of the content inside the template. But from my findings using <script type="text/javascript"></script> inside the template breaks whatever I try to run. So the template is still working fine. But the jquery tabs get broken (doesn't load at all).

It would be great if I could just run scripts inside the "script" tags in the template (as I would any other HTML page).

Thank you for a great JqueryTemplate :)

We have some situations, were some parts of the templates should be ignored if the data is not available. We have not found an elegant solution to this yet. I have created a fiddle to exemplify this:

http://jsfiddle.net/amEtV/

As you can see, ‘subtitle’ will be ‘null’ in the second case. In the third case, ‘subtitle’ is undefined. Nonetheless, the tag is rendered in both cases.

One idea we had so far, is using a formatter that can check for the value of the data passed to it. However, for this you always need a wrapper element (correct me if I am wrong). Another thing you can do, is use a afterInsert or beforeInsert handler to clean up the code to markup.

I don’t now if you intended your plugin to handle these cases. Nonetheless, if you see a more elegant solution to handle undefined or ‘null’ values I would gladly appreciate your thoughts on it.

Good job! but...
Is there a way to append/prepend the template to a container instead of completely overwrite its content?

Assuming to have a UL container and a LI template, is it possible to append LI to UL as its last element? Tnx

Hi,

I really like this jQuery templating engine. But I have a question:

How would I build an A tag where the HREF attribute is delivered through a JSON result set from an Ajax call? What would the template string need to be?

Best regards, Marja

The plugin has changed significantly since the last update of the documentation. Look to re-factor documentation and update to include all the various usage options of the plugin.

Need to add unit tests using QUnit. Will make things easier to test, and provide better ability to regression test.

Hi, i have an issue... my code is working fine in firefox, but not in chrome and IE.. i want to put data in a table set as table... tbody..

here is my js:

$("#userContainer").loadTemplate("html/user/userList.html",null,{
success: function(){
$('#newUserForm').click(function(e) {
e.preventDefault();
loadTemplateForm();
});
}
});
//armo la lista de los usuarios
callServiceJSON("listUser","",function(json){
//seteo el formatter para cambiar los true/false a activo/inactivo
$.addTemplateFormatter({
trueFalseFormatter : function(value, template) {
return value==true? "Activo":"Inactivo";
}
});
//cargo el template
$("#userList").loadTemplate("html/user/userItem.html", json.users,{
//cuando cargo con exito le seteo los action a los botones
success: function(){
$('.editButton').click(function(e) {
e.preventDefault();
loadTemplateForm();
editUser(this.id);
});
$('.deleteButton').click(function(e) {
e.preventDefault();
swal({
title: "Esta seguro?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Si, borrar",
cancelButtonText: "NO!",
closeOnConfirm: false
},
function(){
deleteUser(this.id);
});
});
}
});
});

as you can see.. i first load one template(the list) and then fill it with the items... the list loads fine in all browsers.. but the item only loads in firefox..
any help? i thought that it was because is a tbody and not a div.. i tried with div but still no luck..

im going crazy!

The examples do not work if opened from your local file system, unless you force your browser to ignore same-origin policy. To test this, you can start the examples in Chrome with the following flag:

chrome.exe --disable-web-security

Hi,

recently I discovered that our team was using the binding "data-content-text" which is implemented but not mentioned in the documentation. It would be great if you could add it, so that we do not use undocumented code. Otherwise, if you intend to deprecate it, label it as such and we will look for a different solution.

Thanks!

I would like to render a set of items in a container and then reuse the same container to append some more items. How do I do it? Calling loadTemplate twice on the same container does not seem to work.

Improve the data-format attribute to be able to target specific other populations than just data-content (data-src, data-alt etc). Make sure this is concise and easy to use format. Consider cases where you may want to format two different things on the same element.

Is there a way to give object(data) instead array (data) in this function and have page correctly render?

$("#obj").loadTemplate("template.html", data, {} );

1:
data = { { "name" ; "aaaaa", "id": 1 } , { "name" ; "bbbbbb", "id": 2} , { "name" ; "cccc", "id": 3 } }

instead
2:
data = [ { "name" ; "aaaaa", "id": 1 } , { "name" ; "bbbbbb", "id": 2 } , { "name" ; "cccc", "id": 3 } }]

When i try first data example I haven't got any result and any error.

I have a number of ideas for version 2 of the plugin. I feel there are a number of things that need to be improved. In order to do this, version 2 would not be backward compatible with version 1. Some things that need addressing:

• change data-content and binding to the innerHTML using the word content. This prevents biding to the attribute "content" currently
• change the data-something tags to be data-template-something tags, keeping everything under the data-template structure, thus avoiding potential conflicts
• simplify the notation somehow. Currently data-template-bind can get rather long and complicated. Is there a better way to do this?
• look at the possibility of introducing a watch on the data and updating the DOM
• potentially include conditional formatting, to render template only if a condition is met

Any other ideas welcome for version 2 of the plugin, or advice around whether this is a good idea.

dont know how to do it yet, but it is valuable feature

Since v.1.4.0 we are getting an error on line 102:
$that.append(this.html());
because 'this' is not a jQuery object but the settings variable. This is most likely triggered by line 110
settings.complete();
which probably should be settings.complete.call($that). I tried changing that line and it does get rid of the error but I get some side effects in our applications which I have not been able to narrow down yet. I will comment on it as soon as I know more and provide a code example.

Hi, I couldn't find in the documentation if there is some sort of callback function that will handle the newly created DOM Element so that one can, for instance, add event handlers. Below is an example of the desired behavior. Does it make sense?

$('#myList').loadTemplate('#myTemplate',jsonElements, beforeAppend);

function beforeAppend(element){
   element.on('dragstart', anotherfunction);
}

Thanks,
Sebastian

In the getValue function, it is possible for a value to be null instead of undefined. It would be good to catch that null value. (see marked change below)

function getValue(data, param) {
if (param === "this") {
return data;
}
var paramParts = param.split('.'),
part,
value = data;

    while ((part = paramParts.shift()) && typeof value !== "undefined"  
                       ** && value != null **) {
        value = value[part];
    }

    return value;
}

For the most part, the content of the page is generated after the page loads using the hidden templates. I was able to get a basic visible template to work by change the script tag to a div but this failed for repeaters and more complex structures.

My question/request is if one could (alternatively) take a fully progressive enhancement approach and send static HTML on the first request then extract/parse templates from the content. All the existing methods could be used for further interaction and new objects.

<!-- Author View Template -->
<div id="template">
    <h1 data-content="author">Me!</div>
    <img src="myPic.png" alt="Me!" data-src="authorPicture" data-alt="author"/>
    <p>Posts from <span data-content="author">Me!</span></p>

    <!-- Post snippet repeater template -->
    <div class="post-container" data-repeater-name="posts">
        <a href="linktoarticle.html" class="ShowArticleTrigger">
        <h2 data-content="title">My second post</h2>
        </a>
        <div class="published" data-content="date">Now</div>
        <div class="summary" data-content="post" data-format="sameCaseFormatter">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </div>


    <div class="post-container">
        <a href="linktoarticle.html" class="ShowArticleTrigger">
        <h2>My First Post</h2>
        </a>
        <div class="published">Yesterday</div>
        <div class="summary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </div>
    </div>

</div>


<script>
$('body').on("scrollToBottom", function (e) {
   //get and display more article snippets 
});

$('.ShowArticleTrigger').on("click", function (e) {
   //replace with full article view, pushState URL
});
</script>

Hi,

I have been contacted by people asking me the relationship between this project and the official jQuery Templates project. jQuery Templates is a template engine that started out as a prototype by John Resig, and was maintained under the jQuery GitHub account: "https://github.com/jquery/jquery-tmpl". That link now gets redirected to my GitHub account, since I was the principal developer. (See http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html for more information).

Given the fact that your template engine came later, and is not at all maintained by the jQuery foundation, it seems inappropriate to re-use the "jQuery Template" name. Could you look into finding an original name for your project, rather than reusing the name of an existing template engine? If you want, we can discuss this offline - my email is [email protected], (Note that even I did not reuse the name jQuery Template for what I consider to be the next-generation version - which has strong historical and syntactic relationships to the original jQuery Template design. I instead called it JsRender... Whereas yours has neither historical, nor syntactic, nor "organisational" links to jQuery templates. Of course it is a jquery plugin providing templates, but so are many others - none of which are named as the jquery template plugin...)

Support template tags as well as script tags

I have run into an issue. I am also not sure there is a fix for it, but I thought I would submit it for consideration.

I am trying to create a dynamic template engine. This would read template locations from a data source and load them based on user activity. For a basic template, this is not much of a challenge. The problem comes with nested templates. From what I can tell, there are two issues.
#1 - If I try to load the primary template from a file and use a secondary script tag inside the file based template for the nested template, it is ignored because the template that is loaded from the file is apparently not available in the dom when the nested formatter runs
#2 - If I try to load the primary template from a file and use a secondary file for the nested template, the original (parent) object is written to the dom and apparently forgotten before the child elements are rendered. I imagine this is because of the async nature of loading the templates.

I will probably just have to use my own loader to load the template (with nested template) first and then execute loadTemplate in the success callback. If you can think of some other option, I would appreciate the advice.

I want to be able to check the value in the formatter function call and if the value is empty i want to hide the container. Here is what I am trying to do..

http://jsfiddle.net/bF6cR/1/

I am putting the container id in the data-format-options, and if the value is empty string I select the element using jquery and call hide().

Am I missing something?

Dhaval

For example index.html:

<h1 class="main_header"></h1>
<script>
$('.main_header').loadTemplate("resources/templates/contentBlock/header.template", 
{ treeName: "Tree Name",
path:[
{name: "Playfon", id: "12"},
{name: "Playfon1", id: "13"}
]
});
</script>

and header.template:

<script type="text/html" id="citrusPathHeader">
    <span data-content="name" data-id="this" data-format="headerLink" data-format-target="id"></span>%nbsp;
</script>

<div class="main_header">
    <h2 data-content="path" data-format="nestedTemplateFormatter" data-format-options="#citrusPathHeader"></h2>
    <h3 data-content="treeName"></h3>
</div>

"header.template" don`t see #citrusPathHeader

Example:
test.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Citrus</title>
    <script src="resources/js/framework/jquery-2.1.1.min.js"></script>
    <script src="resources/js/framework/jquery.loadTemplate-1.4.4.min.js"></script>

    <script src="resources/js/commandMenu.js"></script>
</head>
<body>

    <script type="text/html" id="citrusSubMenu">
        <div class="submenu"><span class="name" data-id="id" data-content="title"></span></div>
    </script>

    <div id="allMenus"></div>

</body>
</html>

commandMenu.js

function noMethod()
{

}

var menuCommands = 
[
    {
        nameContextMenu: "folderMenu",
        menus:
        [
            {
                id: "createShowcaseFolder",
                title: "Create showcase"
            },
            {
                id: "editShowcaseFolder",
                title: "Edit Showcase"
            }
        ]
    }
];

$(function() {
$(document).ready(function()
{
$('#allMenus').loadTemplate("resources/templates/contentBlock/menuBlock.template", menuCommands, {success: allLoadedMenu});
}
);


function allLoadedMenu(res)
{
// LENGTH IS 0!
//But this block is showing
    console.log($('.contextMenu').length);  
    $('.contextMenu').each(function()
    {console.log("add hide!");this.addEventListener('mouseleave', hideFoldermenu, false);});

}

function addHideFoldermenu(dir)
{
    dir.addEventListener('mouseleave', hideFoldermenu, false);
}

function hideFoldermenu(e)
{
    $(this).hide();
}

});

menuBlock.template

    <div class="contextMenu" data-id="nameContextMenu" data-format-options='{"parentElement": "span", "template": "#citrusSubMenu"}' data-format="nestedTemplateFormatter" data-content="menus">
    </div>

After loadTemplate jquery can't find class ".contextMenu". Why?

Example Scenario:

for(var someObject in list){

    val id = someID;
    $(id).loadTemplate(jsonObject,afterInsert : function(){

       $(id).find(someOtherElement).append(someHTML);

     });
}

This piece of code will only access the afterInsert function at the last iteration of the loop. The same for success, complete and beforeInsert.

Makes its impossible to use this with data aggregations.

Very sad as I as a fan of this plugin

I have searched for this feature, but it seems it is not present in the plugin.

Is there or will there be a way to template things like description content inside:

<meta name="description" content="..">

I'd like to introduce a tutorial website for jQuery-templating. Something similar to the knockout website would be good, that gave you a step by step, interactive walkthrough as to how to use jQuery templating in various scenarios.

setting data-value in processElements("data-value",.. doesn't work in
version 1.10 jquery, chrome.

adding:
//before jQuery 1.6
$elem.attr('defaultValue', formatted);
//after jQuery 1.5.2
$elem.attr('value', formatted);

seems to get it working.

This one threw me for a loop for a while. I was templating lists for use with JQuery.sortable. In this case, I really needed to control the presentation of the UL itself. So my UL was in my master template with class and style and attribute definitions.

I was expecting the nestedTemplateFormatter to simple return the child LI objects. Instead, it was returning a div tag with the LI items inside. While this did not have any immediate effect on the visuals, it did completely break sortable.

Ultimately, I created my own formatter (nestedTemplateFormatterEX) that did exactly what nestedTemplateFormatter does, but returned the children of the resulting node. (see below)

jQuery.addTemplateFormatter("nestedTemplateFormatterEX", function (value, options, internalSettings) {
if (!options) {
return;
}

        if (typeof options === "string" && options[0] === "{") {
            options = $.parseJSON(options);
        }

        var parentElement = options.parentElement || "div";
        var template = options.template || options;
        return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings).children();
    });

hi,
is it posible to change the background color of a singel cell in a populated table, depending on the value?

I can´t figure out how to modife my template or my formaters to achieve this behaviour. A small example would be nice :-)

best regards,
y4nnick

Have you considered submitting this to Nuget so that it can be included directly from the IDE?

I would love to see an enhancement which would allow the replacement of an existing element with the new template. I envision it working like so:

DOM BEFORE:
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

<script>
$('#d2').loadTemplate('#whatevertemplate', {text: "hello"}, {replace: true});
</script>

DOM AFTER:
<div id="d1"></div>
<div id="whatever">hello</div>
<div id="d3"></div>

Hi, im using the juery template just for about a month, i had to look up a lot of "how its done" in the source code. :-( would be better if there would be more examples here.

like : how you can fill a Select within a template with Data and preselect one of those.

maybe some more cases for : data-template-bind
not only the how_its_done_in_template -> the calling of that would be nice too