使用 Backbone 保存保存 JQuery 可排序列表？答案

【问题标题】：Saving a JQuery sortable list with Backbone save?使用 Backbone 保存保存 JQuery 可排序列表？
【发布时间】：2014-04-08 16:52:49
【问题描述】：

如下所示，我的主干代码可以正常工作，它获取数据并使用下划线模板显示/呈现该数据。我还在主干代码中添加了一个触发事件，以便让 JQuery 将模板数据排序到可排序的列表中。

但是我尝试使用更新回调更新我的可排序列表，这意味着采用更新后的列表顺序，将其转换为 JSON 数据，然后使用 Backbone.save();将数据保存到我的数据库中。

我的主干数据::

  var AdminColModel = Backbone.Collection.extend({
     url: '/Admin/GetMenuData'
  });

  var AdminEditMenu = Backbone.View.extend({
  el: $(".page"),
  render: function() {
      var that = this;
      var MyMenu = new AdminColModel(); 
      MyMenu.fetch({
        success: function(MyMenu) {
            var menutemp = _.template( $('script.MenuTemplate').html(), {MyMenu: MyMenu.toJSON() } );
            that.$el.html(menutemp);
            that.trigger('MenuSortableList', that); <- fires my sort list!  
        }
      });
  } //End of render function
   });

   $(document).ready(function(){  
     var MyMenu = new AdminEditMenu();
     MyMenu.on('MenuSortableList', function(event) { 
        $( "#AdminChangeMenuOrder" ).sortable({
        axis: 'y',
        placeholder: 'AdminMenuChangeableList',
        helper: "clone",
        forcePlaceholderSize: true,
        forceHelperSize: true,
        cursor: "move",
        update: function() {
            var sortableLinks = $(".AdminMenuChangeableList");
            $(sortableLinks).sortable();
            var linkOrderData = $(sortableLinks).sortable('serialize');
            console.log(linkOrderData); 
            linkOrderData.save();
        }
         });
     });
     MyMenu.render();  
   });

现在，除了可排序调用中的“更新”部分调用中的代码之外，这一切都有效。

这是我的下划线模板，

 <script class="MenuTemplate" type="text/template"> 
    <section id="AdminChangeMenuOrder">
        <% _.each(MyMenu, function(MyMenu) { %> 
            <div id="<%= MyMenu.id %>" class="AdminMenuChangeableList"><%= MyMenu.title %> @ <%= MyMenu.path %> Current Level : <%= MyMenu.level %></div>
        <% }); %>
    </section>
 </script>

现在模板可以工作了，但我一直在做一些研究，看起来很多人都使用 li 列表，这是我应该用我的模板做什么，转换为 JSON 对象容易吗？

欢迎大家帮忙，

谢谢

格伦

【问题讨论】：

好的，我有点前卫，这就是我现在在更新调用中的内容，var Data = $(this).sortable('toArray');console.log(Data); - 这似乎工作正常，它在更改后返回当前列表顺序中的所有 ID。我仍然不确定如何将其转换为带有 LEVELS 的 JSON 格式，然后让 Backbone 保存它。

标签： jquery jquery-ui backbone.js underscore.js-templating

【解决方案1】：

好的，我现在已经完成了这一切。首先，我必须将 JQuery 可排序列表转换为 JSON 格式，然后在主干模型中设置它并保存该模型，我不确定这是否是正确的做法，但它确实有效。

我已更改的可排序列表的“更新”部分在哪里，

        update: function() {
            var i = 1;
            var Data = $(this).sortable('toArray');
            _.each(Data, function(Data) { 
                var UpdatedMenuList = new Backbone.Model({ id: Data, level: i++ });
                UpdatedMenuList.url = '/Admin/UpdateMenuData';
                UpdatedMenuList.save(); 
            });
        }

如果有人认为这是错误的，请告诉我以及如何最好地更改我的代码。

谢谢

格伦。

【讨论】：