淘汰可排序更新功能将物品移动到不同位置

时间:2018-06-06 13:52:09

标签: javascript html jquery-ui knockout.js knockout-sortable

我有可敲除的可排序书签页面,可以对书签进行分组并更改位置。我有我所有的功能,但我似乎无法让“afterMove”工作。这是我的观点:

<div class="col-lg-12">

    <div class="bookmarkIconsBox">
        <div data-bind="droppable: newGroup, connectClass :  'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
        <div data-bind="droppable: deleteItem, connectClass :  'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
    </div>

    <div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
        <input class="title" data-bind="textInput: $root.groupname()" />
        <span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
        <span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
    </div>

    <div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
        <input class="title" data-bind="textInput: $root.bookmarkname()" />
        <span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
        <span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
    </div>
  </div>


<div data-bind="foreach:   allBookmarks.bookmarkGroups" class="col-lg-12">

    <div class="bookmarkBoxTitle">
        <h3 class="title" data-bind="text: Description" />
        <span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
    </div>
    <div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass :  'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
    </div>

</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">

    <div>
        <span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
        <span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
    </div>

    <div class="card-block">
        <div class="bookmarkBoxTitle">
            <h4 class="card-title" data-bind="text: Description " />
            <h4 class="card-title" data-bind="text: $index" />
        </div>

        <ul class="card-text">
            <li data-bind="text: workspace"></li>
            <li data-bind="text: role"></li>
        </ul>
        <a class="btn btn-primary" data-bind="attr : {'href':  '/#page/' +  link }">Ga naar</a>
    </div>
</div>

当我将一个项目移入一个组或另一个组时,我希望它执行$ root.update(),但我似乎无法让它工作。

0 个答案:

没有答案