1

Tasks = ko.observableArray(); が入力されたこのjquery UIアコーディオンを持っています。タスクは、選択したプロジェクトによって異なります (次のコードには含まれていません)。新しいプロジェクトを選択するたびに、データベースへの ajax 呼び出しによってタスクのリストが更新されます。次のコードは、新しいプロジェクトが選択された後もすべてのデータを提供しますが、私の動作 (設定) を制御することはできません。

これは私の HTML w ノックアウトです:

<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>

そしてアコーディオンスクリプト:

<script>
$(function () {
    $("#accordion")
         .accordion({
            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', function () {
                 alert("triggered");
          })
    };
});
</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);
    }
};

配列と値は問題なく更新されますが、アコーディオンを折りたたむことができず、collapsible-option が機能していません。どうにかしてオプション (ヘッダー、折りたたみ可能、アクティブなど) をバインディング関数に渡す必要があるように思えますが、どうすればよいでしょうか?

4

1 に答える 1

1

bindinghandler init 関数でバインディング オプションをアコーディオン プラグインに既に渡しています。

var options = valueAccessor();
$(element).accordion(options);

したがって、バインディングに渡されるパラメーターはすべて、アコーディオン プラグインに渡されます。

<div id="accordion" data-bind="jqAccordion: { 
                               header: "> div > h3",
                               collapsible: true,
                               active: false,
                               heightStyle: "content"
                            }"></div>

毎回すべてのパラメーターを渡す必要がないように、init 関数にロジックを追加してデフォルト値に対応することも検討できます (警告: 以下のコード例はクロスブラウザーではありません)。

var options = valueAccessor();
options.collapsible = options.collapsible === undefined ? true : options.collapsible; 
options.active = options.active === undefined ? false : options.active;

$(element).accordion(options);
于 2013-09-13T11:57:49.563 に答える