javascript - jQuery アコーディオンからデータを保存する

Question

「タスク」という名前のforeach-templateループをロードしたソート可能なアコーディオンがあります。ko.observableArray()

TaskIdアコーディオンで、 、TaskName、およびタスクDescription- すべてをレンダリングしますko.observable()。

TaskNameDescriptioninput/textarea 要素でレンダリングされます。

TaskNameまたはDescriptionが変更されたり、アイテムが選択解除されたり、別のアイテムがクリックされたりするたびに、関数saveEdit(item)を呼び出して、更新されたものを ajax リクエストを介してデータベースに送信しTaskNameたいとDescription考えています。

TaskIdに送信する実際のキーと値のペアを取得するには、 を Tasks-array と一致させる必要がありsaveEdit()ます。

これはHTMLです：

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}"></div> 

<script type="text/html" id="task-template">
     <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
          <h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName  /></b></h3>
          <p>
             <label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>
          </p>
     </div>
</script>

これはバインディングです：

ko.bindingHandlers.jqAccordion = {
   init: function(element, valueAccessor) {
       var options = valueAccessor();
       $(element).accordion(options);
       $(element).bind("valueChanged",function(){
          ko.bindingHandlers.jqAccordion.update(element,valueAccessor);
       });
   },
   update: function(element,valueAccessor) {
      var options = valueAccessor();
      $(element).accordion('destroy').accordion(
      {
         // options put here....
         header: "> div > h3"
         , collapsible: true
         , active: false
         , heightStyle: "content"
      })
      .sortable({
              axis: "y",
              handle: "h3",
              stop: function (event, ui) {
                  var items = [];
                  ui.item.siblings().andSelf().each(function () {
                      //compare data('index') and the real index
                      if ($(this).data('index') != $(this).index()) {
                          items.push(this.id);
                      }
                  });
                  // IE doesn't register the blur when sorting
                  // so trigger focusout handlers to remove .ui-state-focus
                  ui.item.children("h3").triggerHandler("focusout");
                  if (items.length) $("#sekvens3").text(items.join(','));
                  ui.item.parent().trigger('stop');
              }
      })
      .on('stop', function () {
              $(this).siblings().andSelf().each(function (i) {
                  $(this).data('index', i);
              });
      })
      .trigger('stop');
   };
};

私が最初に考えたのは、ラインを配置することでした

$root.SelectedTask( ui.options.active );

私のviewModelで定義されたko.observableである.on('click')イベント関数で。SelectedTaskただし、この.on('click')イベントは多くの呼び出しが行われているようで、多くのトラフィックが生成されています。また、選択した「項目」をタスクから ajax 関数を介してデータベースに送信する save(item) 呼び出しをどこに配置するかがよくわかりません。

どんな助けでも大歓迎です。前もって感謝します！:)