knockout.js - Knockout JS でのドリルダウン

Question

私は Web アプリを構築しており、Knockout JS を使用するように UI を変換しようとしています。私はノックアウトの初心者なので、親切にしてください！

通常、従業員リストを (PHP を使用して) ロードし、従業員が選択されている場合は、JQuery を使用してその従業員の ID を見つけ、バックエンドに対して AJAX 呼び出しを行い、結果ボックスに入力して下にスライドします。

Knockout でこの動作を再現する方法はありますか?

Answer 1

ノックアウト/jquery で ajax ドリルダウンを処理する方法は、ノックアウト クリック ハンドラーを使用することです。これにより、任意の属性またはアイテム自体を取得して、jquery で ajax を処理できます。以下の私のコードの例。

html ファイル内:

...
<div class="empListName" data-bind="text: fullName(), click: $root.showEmp">
</div>
....

js ファイル内:

function MainScreenViewModel() {
  // Data
  var self = this;
  self.employees = ko.observableArray([]);
  ...

  // Functions
  self.showEmp = function(data, event){
    var id = data.empId();
    var checkA = $(event.target).parent().find('.empListNameX').first();
    var expand = $(event.target).parent().next();
    if (checkA.hasClass('open')){ //Close it
        checkA.removeClass('open').addClass('closed');
        expand.slideUp();
    }else{
        $.get('/employee/getempinfo/'+id, function(info){
            checkA.addClass('open').removeClass('closed');
            expand.html(info).slideDown();
        })
    }
  }
  ...
}