在jsView中引用数组元素

Reference array element in jsView

本文关键字：数组元素 引用 jsView      更新时间：2023-09-26

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

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

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

<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 ...事件绑定的新文档即将在http://jsviews.com上发布

在文档中找到:

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