KnockoutJS调用customer().fullname报错及重复绑定问题排查

错误原因分析 #

1. customer未定义：客户账户页面本身已由Magento初始化Knockout绑定，全局调用ko.applyBindings()会触发对页面原有绑定（如customer().fullname）的解析，但当前代码未引入Magento的customer uiComponent，因此抛出未定义错误。
2. 重复应用绑定：全局调用ko.applyBindings()会对整个文档重新执行绑定操作，而页面已经完成过一次绑定，因此触发"不能对同一元素多次应用绑定"的错误。

修复后的模板代码 #

<div data-bind="scope: 'kamephis_avatar'">
    <div data-bind="html: info_block"></div>
    <div>
        <span>Last Login Date: </span>
        <span data-bind="text: last_login_date"></span>
    </div>
</div>

<script type="text/javascript">
    require([
        'uiComponent',
        'knockout',
        'jquery',
        'mage/url'
    ], function (Component, ko, $, urlBuilder) {
        'use strict';

        return Component.extend({
            defaults: {
                last_login_date: ko.observable(''),
                info_block: ko.observable('')
            },

            initialize: function () {
                this._super();
                this.loadAvatarData();
            },

            loadAvatarData: function () {
                var self = this;
                $.ajax({
                    url: urlBuilder.build('kamephis_avatar/avatar/index'),
                    type: 'get',
                    dataType: 'json',
                    success: function(response) {
                        self.last_login_date(response.last_login_date);
                        self.info_block(response.info_block);
                    }
                });
            }
        });
    });
</script>

关键修改说明 #

• 移除全局ko.applyBindings()：Magento会自动处理data-bind="scope: 'kamephis_avatar'"指定区域内的绑定，无需手动全局调用。
• 继承Magento的uiComponent：遵循Magento的Knockout集成规范，避免与现有组件冲突，同时利用其初始化机制。
• 移除同步请求（async: false）：同步请求会阻塞页面加载，改为异步请求并在回调中更新Observable变量。
• 使用mage/url生成URL：避免硬编码URL，确保不同部署环境下的路径正确性。
• 组件内定义Observable变量：直接在组件内部声明响应式变量，通过Ajax回调更新，符合Knockout的响应式数据流程。

额外注意事项 #

1. 验证控制器返回的JSON数据包含last_login_date和info_block字段。
2. 若使用外部模板文件，需确保模块内存在对应路径：view/frontend/web/template/avatar-block.html，并在defaults中配置template属性指向该文件。

内容的提问来源于stack exchange，提问作者Jake