8

ノックアウトを使用して複数の div の表示を切り替えたい。以下は私の問題の大まかな考えです -

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>

デフォルトでは、「Div 1」が表示されます。

個々のボタンをクリックすると、クリックされたボタンに基づいて関連する div のみが表示されます。

Knockout のライブ サンプルを確認しましたが、これを効率的に行う方法がわかりません。

助けてください！

4

1 に答える 1

16

以下はあなたのために仕事をします。理想的ではありませんが、作業するためのプラットフォームを提供する必要があります。

まず、Knockout のすべてがビュー モデルに関連付けられています。3 つの div の可視性を制御できるようにしたいので、これに適したビュー モデルを次に示します。私が言ったように、完璧ではありません:)

var buttonVm = new function(){
  var self = this;
  // Flags for visibility
  // Set first to true to cover your "first should be open" req
  self.button1Visible = ko.observable(true);
  self.button2Visible = ko.observable(false);
  self.button3Visible = ko.observable(false);

  self.toggle1 =  function(){
     self.button1Visible(!self.button1Visible());
  }

  self.toggle2 =  function(){
     self.button2Visible(!self.button2Visible());
  }

  self.toggle3 =  function(){
     self.button3Visible(!self.button3Visible());
  }

}

マークアップを次のように変更する必要があります:-

<!-- events here.  When clicked call the referenced function -->
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>

<!-- Visibility set here -->
<div data-bind="visible: button1Visible"> Div 1 </div>
<div data-bind="visible: button2Visible"> Div 2 </div>
<div data-bind="visible: button3Visible"> Div 3 </div>

ここで注意すべきことがいくつかあります。まず、type属性を追加しました。それがない場合、ボタンのデフォルトの動作は、フォームを送信しようとすることです。

それをすべて結ぶ：-

// Create view model
var vm = new buttonVm();
ko.applyBindings(vm);
于 2012-07-19T13:28:57.170 に答える