首页 > 解决方案 > Knockout.js 在数据绑定中找不到函数

问题描述

我有一个带有按钮的 Magento2 模板:

 <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           click: incrementClickCounter,
                           title: $t('Update')
                           }"
                            class="update-cart-item"
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>

我在这里添加的部分是

点击:incrementClickCounter

在我的html页面上方的脚本标签中

<script>
        require(["jquery","ko"], function ($) {
                        var viewModel = {
                    numberOfClicks : ko.observable(0),
                    incrementClickCounter : function() {
                        var previousCount = this.numberOfClicks();
                        this.numberOfClicks(previousCount + 1);
                        console.log(this.numberOfClicks);
                    }
                };
        });
    </script>

但我得到了错误

消息:incrementClickCounter 未定义

标签: knockout.jsmagento2

解决方案


我实际上能够将 jquery 注入到绑定中,如下所示:

<button afterRender="function (target, viewModel) {
                        console.log('Rendered element:', target);
                        console.log('Associated view model:', viewModel);
                        console.log(this === viewModel);
                                jQuery(target).click(function() {
                                    alert( 'Handler for .click() called.');
                                  });
                    }"

但是感觉很脏


推荐阅读