0

私は簡単なテストアプリを持っています。タグを削除して追加したいのですが、次のようなコードがあります:

<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でそれを取得するにはどうすればよいですか?

4

2 に答える 2

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/

ところで、イベント バインディングに関する新しいドキュメントは、 http://jsviews.com{on ...で近日公開予定です。

于 2014-08-17T19:43:32.573 に答える