淘汰赛模板中的jquery slideToggle（）函数答案

【问题标题】：jquery slideToggle() function within knockout template淘汰赛模板中的jquery slideToggle（）函数
【发布时间】：2012-02-19 01:27:01
【问题描述】：

所以，如果我想用淘汰赛的 data-bind="click: ShowHide" 调用一个函数，我会怎么做呢？请记住，数据绑定位于 li 元素上，该元素由模板填充。我的功能如下：

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

ShowHide: function() {

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

在我的模板中我有：

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

【问题讨论】：

标签： jquery knockout.js slidetoggle templating

【解决方案1】：

将 .ShowHide 函数放在代表 li 的对象上（我假设它是 LoadedReport 实例。）

把 .ShowHide 放在上面。或者，您可以将 .ShowHide 函数放在视图模型上，然后在绑定中使用 click: $root.ShowHide。

【讨论】：

前几天我真的想出了这个。原因实际上在于 $(this) 选择器。当点击 Li 时，它会将整个事件传递给函数，所以我需要这一行： $(e.currentTarget).siblings('ul').slideToggle();不过谢谢！
好的。您应该在此处发布您的答案并接受它，以便我们知道您的问题已得到解答，因为它目前显示在未回答的问题查询中。

【解决方案2】：

很抱歉，如果有人觉得这个问题已经得到解答，但对我来说答案并不清楚。所以这是一个明显的例子：

<!-- 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>。

【讨论】：

【解决方案3】：

前几天我自己得到了这个。请参阅有关 Judah H. 对我必须做什么的建议的评论。

【讨论】：