オプションを選択した後のKnockout.js選択したオプション以外の同じオプションを持つ別の選択を生成します

Question

私はKnockout.js初心者です。私は「シンプルな」フォームを作成しようとしています。

私はajaxでhtmlビューをロードしており、バインドを適用しています。

ユーザーはselect（サーバーからDOMにスローされ、JSONとしてロードされません）からいくつかのアドオンを選択することができます。有効なものを選択した後、以前に選択されたアドオンの数がいくつあるかなどを選択します。私はこれまで

<table class="new_account new_account_details"> 
    <tr data-bind="foreach: new Array(plan_addons_num())"> 
     <td> 
      <select class="plans_plan_addon"> 
       <option value="">Select</option> 
       <option value="1">Addon1</option> 
       <option value="2">Addon2</option> 
      </select> 
     </td> 
    </tr> 
</table> 

var viewModels = { 
    planPlans: function() { 
     this.plan_addons_num = ko.observable(1); 
     this.plan_addon = ko.observable(); 
     this.plan_addons = ko.observableArray(); 

//  ko.computed(function() { 
//   if (Number(this.plan_addon()) > 0) { 
//    this.plan_addons_num(this.plan_addons_num() + 1); 
//   } 
//  }, this); 
    } 
}; 

私は値としてforeachの中でそれをバインドした場合、私はそれが現在選択されているアドオンになりたかったが、それは動作しませんplan_addonが持っているもの

。

利用可能なアドオンをJSONコードとしてHTMLのどこかに設定して、viewmodelがjqueryを利用して取得するようにすることができます。 これを行うにはどうすればいいですか？

Answer 1

ノックアウトを使って作業するときは、まずモデルを先に考えることが役立つと感じます。モデル内のすべてを計画し、マークアップは単にモデルの状態を反映する必要があるため、マークアップについては後で心配してください。

あなたの既存のバインディングではどういうことをしているのか分かりませんが、選択コントロールを作成する方法はここにあります。前に選択したオプションの配列にforeachバインディングを作成し、残りのオプションを含むselectをもう1つ追加します。ここで

<table class="new_account new_account_details"> 
    <tr> 
    <!--ko foreach: plan_selectedAddons--> 
    <td> 
     <select class="plans_plan_addon" data-bind="options: $parent.plan_addons, value: $data" disabled></select> 
    </td> 
    <!--/ko--> 
    <td> 
     <select class="plans_plan_addon" data-bind="options: plan_remainingOptions, optionsCaption: 'Select', event: { change: selectAddon }"></select> 
    </td> 
    </tr> 
</table> 

はJavaScriptを実証するための完全なフィドルです：最初にオプションの配列を取り込むためとして Fiddle

はい、私はJSONではなく、DOM上の既存の選択からそれをこすりしようとしていることに含まれるであろうしかし、あなたはいつもjQueryを使ってそれを行い、元の選択を隠すことができます。