1

jsフィドル

プロジェクトのさまざまな部分で Knockout.js を使用しています。ユーザーが選択した内容に基づいて HTML コンテンツをフォームに追加するための最善の方法についてアドバイスを求めています。

私が達成しようとしていることを明確にすると信じているjsFiddleをまとめました。

ユーザーがオプション 1 または 2 を選択すると、HTML マークアップdata-configuration="1,2"がフォームに追加されます。ユーザーがオプション 3 を選択すると、HTML マークアップdata-configuration="3"がフォームに追加されます。

これを行う方法（選択リストの変更イベントにフックする）についていくつかのアイデアがありますが、これを達成するためのより良い「ノックアウト」方法があるかどうか疑問に思っていました。

4

2 に答える 2

1

もう 1 つのアイデアは、バインディング ハンドラーを作成することです。これにより、動作をより細かく制御できるようになります。

http://jsfiddle.net/DRP3d/

書かれているようにjQueryが必要です（ただし、コードをより簡潔にするためだけです）。

基本的に、バインドされた値を調べ、html で使用した属性 (データ構成) を調べてから、値と構成の比較に基づいて特定の要素を非表示または表示します。

ko.bindingHandlers.showtype = {
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var $element = $(element);
      var config = $(element).attr('data-configuration');
      var value = ko.utils.unwrapObservable(valueAccessor());
      config = config.split(',');

      var found = false;
      for(var i=0, len=config.length; i < len; i++) {
          if (value == config[i]) {
              found = true;
              break;
          }  
      }
      if (found) { $element.show(); } else { $element.hide(); } 
  }      
};
于 2013-02-06T20:08:02.680 に答える
1

一般的に、ドロップダウン値に基づいて各セクションに css クラスを設定しようとしています。

<div data-bind="css: { hide: TypeId() == '' || TypeId() != 3 }">

jsFiddleも更新しました。

または、上記で使用したのと同じロジックでif バインディングを使用すると、実際には非表示の要素が DOM から取り出されます。

于 2013-02-06T19:16:32.663 に答える