Question

我有一个包含许多标签的电影列表。我的目标是有一个按钮来添加新标签，这将创建一个TextBox，其中（稍后使用自动完成）可以添加新标签。按下回车按钮（或单击TextBox内的保存图标）后，我想将该标签保存到数据库并删除TextBox并将新标签添加为普通<li>元素

enter image description here

HTML / Razor视图：

<span id="tags">Tags:</span>
<ul class="tags" data-movie="@movie.ID">
    @if (movie.Tags != null)
    {
        foreach (var tag in movie.Tags)
        {
            <li>@tag.Name</li>
        }
    }
    <li class="addTag">
       <a id="addTagLink" data-movie="@movie.ID">Add</a>
    </li>
</ul>

JavaScript的：

<script language="JavaScript">
    //Revealing Module Pattern

    var dataService = new function (ID) {
        addTagForMovie = function (ID, Tag) {
            $.getJSON('/Movies/addTagForMovie/',
                { ID: ID, Tag: Tag }, function (data) {
                    if (data.success) {
                        // remove TextBox, add new tag as <li> element
                    } 
                }); 
        };

        return {
            addTagForMovie: addTagForMovie
        };
   }(); 

   var tagManager = new function () {

        addTagForMovie = function (ID, Tag) {                
            dataService.addTagForMovie(ID, Tag);                

        }

        return {
            addTagForMovie: addTagForMovie // make function visible for the outside
        };
    }();

    // when the Add new link is clicked, add a new textbox
    $("ul.tags li.addTag a").click(function(e) {
        $(this).before("<input id=\"\" data-movie=\""+ $(this).data('movie') +"\" class=\"newTagBox\" type=\"test\">");

        // Enter was pressed inside the newly added Input box
        $('input.newTagBox').keyup(function (e) {                
            if (e.keyCode == 13) {                    /
                addTagForMovie($(this).data('movie'), $(this).val());
            }
        });
    });

到目前为止一切正常，TextBox出现，按Enter后，标签通过MovieController添加到数据库中，我得到了成功或错误结果。

但是，我不知道如何以及在哪里可以删除TextBox并添加<li>NewTag Value</li>元素。当然，我可以为每个标签添加data- - 属性，并使用jQuery找到TextBox，删除它并添加一个新元素，但是，这看起来相当复杂。

不幸的是，我无法使getJSON以这样的方式阻止它直到它完成然后删除将成为输入框的$(this)元素。

做这样的事情的“最佳做法”是什么？还有什么我可以改进的吗？我是Javascript和jQuery的新手。

Answer 1

根据我的理解，您需要将标记值附加到tags列表并清除输入文本值

像

// Enter was pressed inside the newly added Input box
$('input.newTagBox').keyup(function (e) {                
    if (e.keyCode == 13) {                    
        addTagForMovie($(this).data('movie'), $(this).val());
        $('ul.tags').append('<li>' + $(this).val() + '</li>'); //Append to tag list
        $(this).val(''); //Clear textbox value
    }
});

回调方法示例

<script language="JavaScript">
    //Revealing Module Pattern

    var dataService = new function (ID) {
        addTagForMovie = function (ID, Tag, cb) {
            $.getJSON('/Movies/addTagForMovie/',
                { ID: ID, Tag: Tag }, function (data) {
                    if (data.success) {

                        //Call callback method
                        cb();
                    } 
                }); 
        };

        return {
            addTagForMovie: addTagForMovie
        };
   }(); 

   var tagManager = new function () {

        addTagForMovie = function (ID, Tag, cb) {                
            dataService.addTagForMovie(ID, Tag, cb);
        }
        return {
            addTagForMovie: addTagForMovie // make function visible for the outside
        };
    }();

    // when the Add new link is clicked, add a new textbox
    $("ul.tags li.addTag a").click(function(e) {
        $(this).before("<input id=\"\" data-movie=\""+ $(this).data('movie') +"\" class=\"newTagBox\" type=\"test\">");

        // Enter was pressed inside the newly added Input box
        $('input.newTagBox').keyup(function (e) {                
            if (e.keyCode == 13) { 
                var self = this;
                addTagForMovie($(this).data('movie'), $(this).val(), function(){
                    $('ul.tags').append('<li>' + $(self).val() + '</li>'); //Append to tag list
                    $(self).val(''); //Clear textbox value
                });
            }
        });
    });

jQuery：将动态添加的文本框转换为普通标签

1 个答案: