Foundation公開モードでのドロップダウン：ドロップダウンは表示されません。

Question

こんにちは私は公開モードでドロップダウンを開こうとしています。 （xyの理由から私はこのようにする必要があります）。しかし、わかっている理由では、ドロップダウンは表示されません。 Foundation MUSのバージョン（私の上司はそうそうです）はバージョン5.5.1です。あなたは私を助けることができますか？

Javascriptを：

ko.bindingHandlers.modal = { 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     $(document).on('closed.fndtn.reveal', '[data-reveal]', function() { 
      if (this === element) { 
      valueAccessor()(false); 
      } 
     }); 

     var open_binding = allBindings.get('on_modal_open') || null; 
     $(document).on('open.fndtn.reveal', '[data-reveal]', function() { 
      if (typeof open_binding === 'function') open_binding(); 
     }); 
     }, 
     update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var newVal = valueAccessor()(); 
     if (newVal) { 
      $(element).foundation('reveal', 'open'); 
     } else { 
      $(element).foundation('reveal', 'close'); 
     } 
     } 
    }; 

function Reveal() 
{ 
    var self=this; 
    self.showModal=ko.observable(false); 

    self.reveal=function() 
    { 
    self.showModal(true); 
    } 

    self.value=ko.observable(0); 

    self.duplicate=function() 
    { 
    self.value(2*self.value()) 
    } 

    self.inc=function() 
    { 
    self.value(self.value()+1) 
    } 
} 

ko.applyBindings(new Reveal()); 

HTML（その一部は）：http://codepen.io/anon/pen/YWKaxr

Answer 1

にDOMに土地任意の要素はによって "活性化" されなければならない

Value:<span data-bind="text:value"></span><br> 
<a data-bind="click:reveal" > Reveal Modal</a> 



    <div data-bind="modal:showModal" class="reveal-modal tiny" data-reveal > 
    <a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a> 
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1"> 
    <li><a href="#" data-bind="click:duplicate">Double value</a></li> 
    <li><a href="#" data-bind="click:inc">Inc value</a></li> 
</ul> 

</div> 

例です.foundation(...)呼び出し。あなたがすでに持っているカスタムバインディングハンドラは、モーダルなもののためにこれを行います。あなたは例えば、それは同様モーダルの内容を実行する必要があります。：

update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var newVal = valueAccessor()(); 

    $(element).foundation(); // New! 

    if (newVal) { 
     $(element).foundation('reveal', 'open'); 
    } else { 
     $(element).foundation('reveal', 'close'); 
    } 
} 

あなたは新しいことは、あなたの好み/コンテキストにビットを呼び出すことを微調整する必要があるかもしれません。

this pen fiddleを参照してください。

また、ちょっときれいにすると、zurb foundationドロップダウンをブートストラップするための別個のカスタムバインディングハンドラを作成できます。

Answer 2

は、ビューモデルと、このような基盤を初期化します。

$(document).ready(function() 
{ 
    ko.applyBindings(new Reveal()); 
    $(document).foundation(); 
})