Функция jquery slideToggle () в шаблоне нокаута - PullRequest
Новая
       23

Функция jquery slideToggle () в шаблоне нокаута

0 голосов
/ 26 января 2012

Так что, если бы я захотел вызвать функцию с data-bind = "click: ShowHide" в knockout, как бы я поступил?имейте в виду, что привязка данных находится на элементе li, который заполняется шаблоном.моя функция была следующей: 

viewModel = {
LoadedReports: ko.observableArray([]),

ShowHide: function() {

            $(this).children().slideToggle('slow');
        }
}

и в моем шаблоне у меня есть: 

<li data-bind="click: ShowHide, clickBubble: false"><'children elements being populated'></li>

Ответы [ 3 ]

1 голос
/ 01 февраля 2014

Извините, если кто-то чувствует, что на это уже ответили, но мне ответ не был ясен.Итак, вот четкий пример: 

<!-- Step 1 - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
    <!-- Step 2 - Include jquery and knockout -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>

    <!-- Step 3 - Add script to run when page loads -->
    <script type="text/javascript">
        $(document).ready(function(){

            <!-- Step 4 - Create a ViewModel -->
            function viewModel() {
                _self = this;
                _self.showHide = function(viewModel, event) {
                    $(event.currentTarget).children('div').slideToggle();
                };
            };

            <!-- Step 5 -  Activates knockout.js bindings -->
          ko.applyBindings(new viewModel());
        });
    </script>
</head>
<body style="">
    <div>
        Option 1
        <!-- Step 6 - Create a HTML Elements with bindings -->
        <div data-bind="click: showHide" style="border:2px solid;">
        Click me
            <div style="display: none;">
              Now you see me!
            </div>
        </div>
    </div>
</body>
</html>

Отличие от вопроса состоит в том, что я просто использую теги <div> вместо <li> для этого примера.

1 голос
/ 26 января 2012

Поместите функцию .ShowHide в объект, который представляет li (я предполагаю, что это экземпляр LoadedReport.)

Поместите .ShowHide на это. Кроме того, вы можете поместить функцию .ShowHide в модель представления, а затем в привязку использовать click: $ root.ShowHide.

0 голосов
/ 30 января 2012

Получил это сам на днях.См. Комментарий к предложению Джуды Х. о том, что я должен был сделать.

...