Question

大家好我有这个例子，我尝试在一个揭密模式中打开一个下拉列表。（由于这个原因，我必须这样做。）但由于未知原因，下拉列表未显示。 I 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（部分内容）：

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(...)调用“激活”。您已经拥有的自定义绑定处理程序仅针对模式内容执行此操作。你需要它来做模态的内容，例如：

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。

或者，可能有点漂亮，你可以为bootrstrapping zurb奠定下拉列表创建一个单独的自定义绑定处理程序。

Answer 2

初始化视图模型和基础如下：

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

揭示模式的基础下拉：未显示下拉

2 个答案: