显示模式的基础下拉列表：未显示下拉列表

Question

我有这个例子，我尝试在显示模式中打开一个下拉菜单（出于各种原因我必须这样做。）但是由于未知原因，下拉菜单没有显示。我必须使用的基础版本（我老板是这样说的）是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（部分）：

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>

例子在http://codepen.io/anon/pen/YWKaxr

Answer 1

任何落入 DOM 的元素都必须通过 .foundation(...) 调用 "activated"。您已经拥有的自定义绑定处理程序仅针对模态内容执行此操作。您还需要它来执行模态的内容，例如：

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

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

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

您可能需要对 liking/context 的新呼叫进行微调。

见this pen fiddle。

或者，您可以创建一个单独的自定义绑定处理程序，用于引导 zurb 基础下拉菜单。

Answer 2

像这样初始化视图模型和基础：

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

显示模式的基础下拉列表：未显示下拉列表

Foundation Dropdown on reveal modal: Dropdown is not shown

modal-dialog

zurb-foundation

knockout.js

drop-down-menu