Question

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

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

ShowHide: function() {

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

在我的模板中我有：

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

Answer 1

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

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

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

Answer 3

前几天我自己拿到了这个。请参阅Judah H.关于我必须做的事情的评论。

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

3 个答案: