淘汰模板中的 jquery SlideToggle() 函数

发布于 2024-12-29 03:41:52 字数 422 浏览 0 评论 0原文

因此，如果我想调用带有淘汰赛的 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>

原文

So if I wanted to call a function with knockout's data-bind="click: ShowHide" how would i go about that?
keep in mind the data-bind is on an li element, which is being populated by a template. my function was as follows:

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

ShowHide: function() {

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

and within my template I have :

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看轻我的陪伴 2025-01-05 03:41:52

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

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

回复收藏 0 原文

友谊不毕业 2025-01-05 03:41:52

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

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

与问题的区别在于我在这个例子中使用

标签而不是

。

Sorry if anyone feels that this is already answered, but to me the answer wasn't clear. So here is a clear example:

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

The difference from the question is simply that I am using <div> tags instead of <li> for this example.

回复收藏 0 原文