Search code examples
javascriptjsviews

Reference array element in jsView

I have simple test app, I want to remove and add tags, I have code like this:

<script id="tags_template" type="text/x-jsrender">
<div class="tags">
    Tags:
    <ul>
    {^{for tags}}
        <li>{{:name}}<a>&times;</a></li>
    {{/for}}
        <li><input /></li>
    </ul>
</div>
</script>

and JS

var $view = $('#view');
var tags_tmpl = $.templates("#tags_template");
var tags = [];
tags_tmpl.link('#view', {tags: tags});
$view.find('input').keydown(function(e) {
    if (e.which == 13) {
        $.observable(tags).insert({name: $(this).val()});
        $(this).val('');
    }
});
$view.find('ul').on('click', 'a', function() {
    // how to remove the tag?
});

Now how can I remove the tag? There is $.observable(array).remove but how can I reference that element in template and how can I get it in javascript?

Solution

  • Found it in the docs:

    $view.find('ul').on('click', 'a', function() {
    var view = $.view(this);
    $.observable(tags).remove(view.index);
});