java - 在 Wicket 中接收 jQuery 正文更改

Question

我在这里有一个关于 Wicket 和 jQuery 的问题。我得到了一个由 Wicket 渲染和显示的网页。在此页面中，我得到了一个“可拖动”和一个“可放置”组件，用户应该能够在其中移动组件。这是通过 jQuery 实现的。此外，我在网页末尾有一个“保存”按钮，它应该保存新值(如果有的话)，这意味着:新删除的项目。但是，如果我单击“保存”，我看不到 Wicket 中新放置的对象，我仍然只能看到从一开始就位于“可放置”区域的对象。这里有一些代码片段:

HTML:

<div class="container">
    <div id="user">
        <h1 class="ui-widget-header">Benutzer</h1>
        <div class="ui-widget-content" id="userList">
            <input type="text" placeholder="Benutzername" id="userNameSearch" />
            <ul class="list-group">
                <li class="list-group-item" wicket:id="userList"><span
                    wicket:id="user" id="user"></span><span style="visibility: hidden;" wicket:id="userId" id="userId"></span></li>
            </ul>
        </div>
    </div>

    <div id="project">
        <h1 class="ui-widget-header">Benutzer im Projekt</h1>
        <div class="ui-widget-content" id="project">
            <ul class="list-group">
                <li class="placeholder list-group-item"><span>Benutzer
                        in dieses Feld ziehen.</span></li>
                <li class="list-group-item" wicket:id="usersInProjectList"><span
                    wicket:id="userInProject"></span><span style="visibility: hidden;" wicket:id="userInProjectId"></span></li>
            </ul>
        </div>
    </div>
    <button id="save" wicket:id="save">Speichern</button>
</div>
<script>
    $(function() {
        $("#userList li").draggable({
            appendTo : "body",
            helper : "clone"
        });
        $("#project ul")
                .droppable(
                        {
                            activeClass : "ui-state-default",
                            hoverClass : "ui-state-hover",
                            accept : ":not(.ui-sortable-helper)",
                            drop : function(event, ui) {
                                $(this).find(".placeholder").remove();
                                var userName = ui.draggable.find("#user").text();
                                var userId = ui.draggable.find("#userId").text();
                                $("<li class=\"list-group-item new-project-member\" wicket:id=\"usersInProjectList\"><span wicket:id=\"userInProject\">"+userName+"</span><span style=\"visibility:hidden;\" wicket:id=\"userInProjectId\">"+userId+"</span></li>")
                                        .appendTo(this);
                                $(ui.draggable).remove();
                            }
                        }).sortable({
                    items : "li:not(.placeholder)",
                    sort : function() {
                        // gets added unintentionally by droppable interacting with sortable
                        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                        $(this).removeClass("ui-state-default");
                    }
                });

        $('#userNameSearch')
                .keyup(
                        function() {
                            var valThis = $(this).val().toLowerCase();
                            if (valThis == "") {
                                $('#userList li').show();
                            } else {
                                $('#userList li')
                                        .each(
                                                function() {
                                                    var text = $(this)
                                                            .text()
                                                            .toLowerCase();
                                                    (text.indexOf(valThis) >= 0) ? $(
                                                            this).show()
                                                            : $(this)
                                                                    .hide();
                                                });
                            }
                            ;
                        });
    });
</script>

Java 代码(Wicket):

    ListView userListView = new ListView("userList", finalUserList) {
        protected void populateItem(ListItem item) {
            User user = (User) item.getModelObject();
            item.add(new Label("user", user.getLastname()+", "+user.getFirstname()));
            item.add(new Label("userId", user.getId()));
        }
    };

    ListView usersInProjectListView = new ListView("usersInProjectList", usersInProjectList) {
        protected void populateItem(ListItem item) {
            User user = (User) item.getModelObject();
            item.add(new Label("userInProject", user.getLastname()+", "+user.getFirstname()));
            item.add(new Label("userInProjectId", user.getId()));
        }
    };
    usersInProjectListView.setOutputMarkupId(true);

    add(new AjaxLink<Void>("save")
            {
                @Override
                public void onClick(AjaxRequestTarget target)
                {
                    System.out.println(target.getPage().get("usersInProjectList"));
                    //window.close(target);
                }
            });     
    add(userListView);
    add(usersInProjectListView);

Answer 1

您可以通过某种方式将更改从客户端获取到服务器，例如使用 Ajax。您可以触发可通过 AbstractAjaxBehaviour 添加的回调函数(请参阅详细信息 here )，或者切换到 wicket-dnd