magento2:在phtml里面用ko模板并传值给模板

本文链接：https://blog.youkuaiyun.com/weixin_40024174/article/details/120065284

本文介绍了如何在Magento2的PHTML文件中结合Knockout（KO）模板进行组件开发，详细讲解了如何创建自定义组件、编写JS逻辑以及定制模板，同时阐述了如何将数据从PHTML传递到KO模板，为实现更丰富的前端交互提供了指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

phtml:

<div class="custom-component" data-bind="scope:'custom_Component'">
    
    <!-- ko template: { name: $data.template, data: {current_product_id: "<?php echo $product_id; ?>",uidata: $data} } --><!-- /ko -->
    //uidata: $data 为component里的数据
</div>
<script type="text/x-magento-init">
{
    ".custom-component": {
        "Magento_Ui/js/core/app": {
            "components": {
                "custom_Component": {
                    "component": "Magento_Wishlist/js/components/custom-ajax"
                }
            }
        }
    }
}
</script>

//component:
custom-ajax.js:

define([
    'jquery',
    'uiComponent', 
    'ko'
],function ($, Component, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Magento_Wishlist/components/custom-wishlist'
        },
        variable1: ko.observable(false),
        variable2:'aaa2',
         variable3:'aaa3',
		current_page_url: document.location.href,
		
        initialize: function () {
            this._super();
            this._load();
            
        },
        _load: function () {
            var _this = this;
            .....
        },
		click_action: function(){
			 var _this = this.uidata, //调用uidata，此this指 template里传的data
               current_page_url =_this.current_page_url,
               _this_selector = $(event.currentTarget),
               product_id = _this_selector.data("product-id");  // 或者这个this.current_product_id
               ......
		}
      
      
    });

});

template:
custom-wishlist.html

<div class="custom-block" data-bind="click: uidata.click_action, attr: {'data-product-id': current_product_id}">
    <div class="block-wrapper">
            <span data-bind="css: uidata.variable1() ? uidata.variable2 : uidata.variable3"
            class="custom-action"></span>
    </div>
</div>