Model view controller 主干事件触发次数太多

我正在努力学习如何用脊梁骨工作。我目前正在尝试将jqueryui中的sortable添加到由Addy Osmani创建的todo应用程序中

因此，我试图触发一个关于可排序丢弃事件的事件，正如我在js小提琴中看到的那样。此事件将在我的项目视图中触发一个函数（drop（）），该函数将在我的应用程序视图中触发一个函数（update-order（））。我希望最后一个函数通过更改并保存新的顺序来重新排序待办事项列表

我的问题是，我的函数updateOrder被激发了4次，当drop函数只被激发了一次时，顺序的改变也没有被记录下来，我不明白为什么

下面是我的例子：我基本上是在尝试颠倒排序表的drop事件的顺序

我希望我的函数updateOrder只触发一次，并且记录下顺序的更改。。。但这一切都没有发生

我真的需要你的帮助；）提前感谢；）

这是我代码的一部分（您可以在我的示例中看到其余部分）

$（文档）.ready（函数（）{
$（“#小部件列表”）。可排序({
停止：功能（事件、用户界面）{
event.stopPropagation（）
event.preventDefault（）；
ui.item.trigger（'drop'，ui.item.index（））；
}
});
});    
//在下降时，我们颠倒顺序
更新顺序：函数（事件、模型、位置）{
警报（“更新命令”）；
console.log（app.Widgets.length）；
app.Widgets.each（功能（小部件、订单）{
widget.save({
“顺序”：app.Widgets.length-order
});
});
}
//在事件删除时，我们触发函数更新顺序
下降：功能（事件、位置）{
此.$el.触发器（'update-order'，[this.model，position]）；
},  

好吧，我想出来了，我遇到的问题是在属性更改（顺序）时触发了更新顺序事件。因为在一次拖放中，更改顺序的数量与项目的数量一样多，所以事件被触发了两次，我只需更改触发更新顺序事件的方式，它就可以完美地工作

<script>
        $(document).ready(function() {
            $('#widget-list').sortable({
                stop: function(event, ui) {
                    event.stopPropagation()
                    event.preventDefault();
                    ui.item.trigger('drop', ui.item.index());
                }
            });
        });    
    </script>


//on the drop, we invert the order
        updateOrder:function(event, model, position){
            alert('update-order');
            console.log(app.Widgets.length);
            app.Widgets.each(function (widget, order) {
                widget.save({
                    'order': app.Widgets.length-order
                });
            });
        }


//On the event drop, we trigger the function update order
drop: function(event, position) {
    this.$el.trigger('update-order', [this.model, position]);
},