Javascript function inside jQuery template is not working correctly

Question

I'm trying to build a list of checkboxes by using jQuery.tmpl It'll list an array of items with a checkbox near them, and I want to check some of these checkboxes parametrically...

The template code is:

<ul>
{{each(i,val) Values}}
    <li>
        <input type="checkbox" {{if $.inArray(i, Default) != -1}} checked="checked"{{/if}}>
        <em>${val}</em>
    </li>
{{/each}}
</ul>

and the template definition:

<script type="text/javascript">
    $(document).ready(function() {
        $('#tpl_selector').tmpl({
            Default: [1,2],
            Values: {
                1: 'Item 1',
                2: 'Item 2',
                3: 'Item 3'
            }
        }).appendTo('#area');

    });
</script>

So the Item 1 and Item 2 should be checked in this case. The list is created with no problem, but {{if $.inArray(i, Default) != -1}} checked="checked"{{/if}} part is not working.

However, when I replace 'i' with a number, it works: {{if $.inArray(1, Default) != -1}} checked="checked"{{/if}}

I doesn't make any sense at all... Do you have any suggestions?

Another logic to fill the checkboxes is ok too, like I don't know smt. like a callback function after the rendering completes or else...

Matt Ball · Accepted Answer · 2010-11-08 15:49:56Z

4

The problem

In JavaScript objects, the key is always a string. Your Default array contains numbers, but the "needle" you're passing in (i) is a string, so $.inArray will always return false,.

jsfiddle 0

The solutions

Any one of these will work:

Make Values a proper array, rather than an object "indexed" by strings containing numbers.
- jsfiddle 1 (Note the zero-based indexing!)
Make Defaults an array of strings.
- jsfiddle 2
parseInt() the Values key (i) when you pass it to $.inArray(). I think this is an ugly fix.
- jsfiddle 3

Oh, and welcome to Stack Overflow!

answered Nov 8, 2010 at 15:49

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

madpoet Over a year ago

Thank you so much for the well explained answer... :) #2 is what I need as the keys matter...

Collectives™ on Stack Overflow

Javascript function inside jQuery template is not working correctly

1 Answer 1

The problem

The solutions

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The problem

The solutions

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related