javascript - knockout js : data-bind click not working

Question

我无法通过简单的按钮单击来触发 logMyStuff我的网站中的 knockout 功能。请注意，我添加了 <button> , <a> ，和<div>尝试让它发挥作用。我已经用它做了一个 js fiddle ，但是 js fiddle 有效。

这是我的代码:

var SearchFilterViewModel = (function () {
        function SearchFilterViewModel() {
            this.logMyStuff = function () {
                console.log("stuff");
            };
            this._categoryID = 1;
            this._categories = ko.observableArray([
                new Category("Vegan Meat", 1),
                new Category("Vegan Dairy", 2),
                new Category("Confectionary", 3),
                new Category("Baking", 4),
                new Category("Restaurants", 5),
                new Category("Fashion", 6)
            ]);
            this._regionGetter = new AreaGetter();
            this._townGetter = new AreaGetter();
            this._regionGetter.getAreas("2186224");
            this._regionGetter._selectedArea.subscribe(this._townGetter.getAreas.bind(this._townGetter));
        }
        return SearchFilterViewModel;
    })();

    $(document).ready(function () {
        var _searchFilterViewModel = new SearchFilterViewModel();
        var _searchFilterForm = $("#find-vegan-products-page").find("form")[0];
        ko.applyBindings(_searchFilterViewModel, _searchFilterForm);
    });

HTML:

<div id="find-vegan-products-page" class="full-size container-fluid" style="height:900px; padding: 70px 40px 40px 40px;">
            <!-- TODO: Make blackand white video section a bit shorter -->
                <h1 style="margin:0px 0px 20px 0px; color: dimgray;">FILTER YOUR SEARCH</h1>
                <button style="width:100px;height:100px;" data-bind="click: logMyStuff"></button>
                <a style="width:100px;height:100px;" data-bind="click: logMyStuff"></a>
                <div style="width:100px;height:100px;" data-bind="click: logMyStuff"></div>
                <form role="form">
                    <div class="row">
                        <?
                            echo RegionSelect::display();
                            echo TownSelect::display();
                            //echo CategorySelect::display();
                            ?>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="go-button" 
                                class="with-border clickable" 
                                href="#find-vegan-products-page" >
                                <h5  class=" text-center medium-text">GO</h5>
                            </div>
                        </div>
                    </div>
                </form>
        </div>

Answer 1

那是因为你在 applyBinding() 中定义的根节点是<form> ，而您的<button> , <a>和<div>正在调用 logMyStuff()不属于该形式。

试试这个:

var _searchFilterRoot = $("#find-vegan-products-page")[0];
ko.applyBindings(_searchFilterViewModel, _searchFilterRoot);