jquery - 使用 Backbone 或为此编写一个 jQuery 插件......或两者兼而有之？

Question

我确信这个功能已经作为一个 jQuery 插件存在。

假设我想创建一个“转移”控件，就像这样。我有两个文本框，我想通过按钮在两者之间传输数据。

我在我的 Web 应用程序中大量使用 Backbone.js。

我可以通过 Backbone 视图 + 集合来做到这一点，或者我可以编写一个 jQuery 插件来处理这个问题。如果我编写一个 jQuery 插件，我可能会在 Backbone 视图中与它交互，以便将事物模块化。

Answer 1

这可以通过一个非常简单的 jQuery 函数来完成：

$('.transfer').on('click',function(){
    $($(this).data('from'))
        .find(':selected')
        .remove()
        .appendTo($(this).data('to'))
        .prop('selected',false);
});

假设以下 HTML：

<select id="one" multiple>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select id="two" multiple></select>

<button class="transfer" data-from="#one" data-to="#two">&raquo;</button>
<button class="transfer" data-from="#two" data-to="#one">&laquo;</button>

--- jsFiddle 演示 ---

你可以用它创建一个小的 jQuery 插件，给它两个select元素并让它创建传输按钮和功能，但它也可以作为一个函数使用。使用插件，您还可以添加更复杂的功能，例如在option元素来回移动时保持元素的原始顺序。

Answer 2

您可以使用 jQuery-UI droppable：http: //jqueryui.com/demos/droppable/#propagation

在 drop 事件中，您可能希望查看被删除的元素，并从以前的集合中执行 Backbone .remove 并在接收集合中执行 .add ：

// Store a unique id of each item on the corresponding DOM element.
// ex. <div data-id="4129"></div>

$( ".selector" ).bind( "drop", function(event, ui) {
  // Look at the id and do a Collection.where() call to retrieve a reference to it.
  // Perform the .remove and the .add with that reference.
});