knockoutjs and materializecss javascript dropdown

Когда я пытаюсь использовать раскрывающийся список javascript materializecss (http://materializecss.com/dropdown.html) в коде, который динамически генерируется привязкой forock для нокаута, выпадающие параметры не отображаются при нажатии на триггер спуска.knockoutjs and materializecss javascript dropdown

<ul class="list" data-bind="foreach: items"> 
    <li> 
    <!-- Dropdown Trigger --> 
    <a class='dropdown-button btn' href='#' 
      data-bind="attr: {'data-activates': 'dropdown' + $index()}">Drop Me!</a> 
    <!-- Dropdown Structure --> 
    <ul data-bind="attr: {id: 'dropdown' + $index()}" class='dropdown-content'> 
     <li><a href="#!">one</a></li> 
     <li><a href="#!">two</a></li> 
     <li><a href="#!">three</a></li> 
    </ul> 
    </li> 
</ul>

Materializecss говорит выпадающий должен быть инициализирован с

$(".dropdown-button").dropdown();

Однако, это, кажется, не имеют никакого эффекта.

Любая помощь будет оценена по достоинству. Мне не удалось найти помощь на форумах нокаутов или в других местах.

EDIT - полная рабочая модель

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <!--Import Google Icon Font--> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
</head> 
<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 

    <script > 
     function ItemsViewModel() { 
      var that = this; 

      function collectionItem(root, title) { 
       var self = this; 
       self.title = ko.observable(title); 
      }; 

      that.items = ko.observableArray(); 
      that.loadItems = function() { 
       for (var i = 0, j = 5; i < j; i++) { 
        that.items.push(new collectionItem(that,"title"+ i.toString())); 
       } 
      }; 
     }; 

     ko.bindingHandlers.materializeDropdown = { 
      init: function (element, valueAccessor) { 
       $(element).dropdown(); 
      }, 
      update: function (element, valueAccessor, allBindings) { 
      } 
     }; 

     var itemsViewModel; 

     $(document).ready(function() { 
      itemsViewModel = new ItemsViewModel(); 

      ko.applyBindings(itemsViewModel,  $("#divForItemsViewModel").get(0)); 
      itemsViewModel.loadItems(); 
     }); 
    </script> 
    <div id="divForItemsViewModel"> 
     <ul class="list" data-bind="foreach: items"> 
      <li> 
       <div data-bind="text:title"></div> 
       <!-- Dropdown Trigger --> 
       <a class='dropdown-button btn' href='#' 
        data-bind="attr: {'data-activates': 'dropdown' + $index()}, materializeDropdown">Drop Me!</a> 
       <!-- Dropdown Structure --> 
       <ul data-bind="attr: {id: 'dropdown' + $index()}" class='dropdown-content'> 
        <li><a href="#!">one</a></li> 
        <li><a href="#!">two</a></li> 
        <li><a href="#!">three</a></li> 
       </ul> 
      </li> 
     </ul> 
     <a class='dropdown-button btn' href='#' 
     data-activates="dropdownx">Drop Me THIS WORKS</a> 
     <ul id="dropdownx" class='dropdown-content'> 
      <li><a href="#!">one</a></li> 
      <li><a href="#!">two</a></li> 
      <li><a href="#!">three</a></li> 
     </ul> 
    </div> 
</body> 
</html>

источник

2016-05-05 W Pearson

Ваш * вопрос * технически не обман, но я почти дословно повторю [этот ответ, который я написал некоторое время назад] (http://stackoverflow.com/a/34394679/419956). – Jeroen

Спасибо, Jeroen. Да, прежде чем отправлять этот вопрос, я изучил ваш ответ, и я просто попробовал пользовательскую привязку Fede, но он, похоже, не помог. Ключ к связыванию триггера с контентом - это привязка данных к триггеру и привязка идентификатора к цели. Значения должны быть одинаковыми. Думаю, я правильно их установлю. –

Использование пользовательского связывания для интеграции этого плагина пользовательского интерфейса примерно обязательно. Инициализация его, как вы, будет, насколько я думаю, никогда не работает. В любом случае (с пользовательской привязкой или без нее) было бы полезно, если бы вы могли распространить код вопроса на [mcve]. – Jeroen

Я думаю, что вам нужно здесь является custom binding. Я считаю, что когда вызывается $(".dropdown-button").dropdown();, привязка foreach может не выполняться, и, следовательно, значения выпадающего списка пока недоступны.

Я бы переместил ul для выпадающей структуры перед тегом a выпадающего триггера, чтобы убедиться, что привязка в структуре выполняется до привязки в триггере. Затем добавьте свою настраиваемую привязку к триггеру, которая при вызове выполняет .dropdown() на цель.

EDIT

Вот образец предложенный обычай связывания:

ko.bindingHandlers.materializeDropdown = { 
    init: function(element, valueAccessor) { 
     $(element).dropdown(); 
    }, 
    update: function(element, valueAccessor, allBindings) { 
    } 
};

И тогда HTML может быть следующим.

<ul class="list" data-bind="foreach: items"> 
    <li> 
    <!-- Dropdown Structure --> 
    <ul data-bind="attr: {id: 'dropdown' + $index()}" class='dropdown-content'> 
     <li><a href="#!">one</a></li> 
     <li><a href="#!">two</a></li> 
     <li><a href="#!">three</a></li> 
    </ul> 
    <!-- Dropdown Trigger --> 
    <a class='dropdown-button btn' href='#' 
      data-bind="attr: {'data-activates': 'dropdown' + $index()}, materializeDropdown">Drop Me!</a> 
    </li> 
</ul>

Надеюсь, что это поможет.

источник

2016-05-05 18:18:22 Fede

Thanks Fede - просто указать, что работает $ (". Dropdown-button"). Dropdown(); это шаг инициализации - не метод для запуска раскрывающегося списка, поэтому я действительно не вижу необходимости в пользовательской привязке. Вместо этого, в качестве теста, после отображения страницы, я нажимаю ссылку, которая запускает $ (". Dropdown-button"). Dropdown(); для инициализации всех выпадающих списков. Однако это, похоже, не влияет. Возможно, я не понимаю использование пользовательской привязки. –

Я отредактирую свой ответ с образцом, хотя если вы уже используете '$ (". Dropdown-button "). Dropdown();' вручную после привязок, то у меня нет идей. В любом случае я обновлю свой ответ только для полноты. – Fede

Спасибо Fede за то, что вы включили образец кода. К сожалению, использование пользовательской привязки, похоже, не имеет никакого значения. –

knockoutjs and materializecss javascript dropdown

ответ

Смежные вопросы