javascript - jsView中引用数组元素

Question

我有简单的测试应用程序，我想删除和添加标签，我有这样的代码:

<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>

和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?
});

现在如何删除该标签？有 $.observable(array).remove 但如何在模板中引用该元素以及如何在 javascript 中获取它？

Answer 1

是的，您自己的答案是正确的。但您可能有兴趣使用更加数据驱动和声明性的方法，如下所示:

<div id="view"></div>

<script id="items_template" type="text/x-jsrender">
    Items (Hit Enter to add):
    <ul>
        {^{for items}}
            <li>
               {{:name}}
               <a class="remove" data-link="{on ~remove}">&times;</a>
            </li>
        {{/for}}
    </ul>
    <input data-link="{:newName trigger=true:} {on 'keydown' ~insert}"/>
</script>

还有

var items_tmpl = $.templates("#items_template");
var items = [];

items_tmpl.link('#view', {items: items}, {
    insert: function(ev) {
        if (ev.which === 13) {
            // 'this' is the data item
            $.observable(items).insert({name: this.newName});
            $.observable(this).setProperty('newName', '');
        }
    },

    remove: function() {
        // 'this' is the data item
        $.observable(items).remove($.inArray(this, items));
    }    
});

删除的替代方案是:

    remove: function(ev) {
        var view = $.view(ev.target);
        $.observable(items).remove(view.index);
    }

或者:

    remove: function(ev, eventArgs) {
        var view = $.view(eventArgs.linkCtx.elem);
        $.observable(items).remove(view.index);
    }

http://jsfiddle.net/BorisMoore/f90vn4mg/

顺便说一句，{on ... 事件绑定(bind)的新文档即将在 http://jsviews.com 上发布