Magento – Magento 2 : knockout data-bind:click not working

knockoutmagento2

I added phtml file using ajax response. There are two buttons available in that phtml file.

Buttons.phtml :

<div id="rh-buttons-temp" class="actions" data-bind="scope:'rh-buttons'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions()">
        <span>Select</span>
    </button>
    <button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:addCustomOptions()">
        <span>Cancel</span>
    </button>
    <script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "rh-buttons": {
                        "component": "RH_Custom/js/knock"
                        }
                    }
                }
            }
    }
    </script>
</div>

MainFile.phtml :

<div id="rh-ko-example" data-bind="scope:'rh-ko-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "rh-ko-scope": {
                        "component": "RH_Custom/js/kotemplate",
                        "template" : "RH_Custom/kotemplate"
                        }
                    }
                }
            }
    }
    </script>
    <div style="display:none" class="product details product-item-details">
        <div class='custom'>
        </div>
    </div>
</div>

This Buttons.phtml file added in <div class='custom'></div> using ajax response.

Now, when click on Select Button then addCustomOptions() function call should be call. But, it's not working.

EDIT :

knock.js

define(
[
    'jquery',
    'uiComponent',
    'ko',
    'RH_Custom/js/kotemplate'
],
function($,Component,ko,kotemplate) {
    'use strict';
     return Component.extend({
        initialize: function () {
            alert("knock call");
            self = this;
            this._super();
            // kotemplate.addCustomOptions(); 
        },
        addCustomOptions : function()
        {
            console.log('knock custom options');
        }
    });
});

alert call successfully on above file. But, kotemplate.addCustomOptions() is not working. It returns error :

Uncaught TypeError: kotemplate.addCustomOptions is not a function

Where I do mistake?

Please help me.

Thanks.

Best Answer

You can't directly call the knockout method. Instead, add $parentwhile calling it. something like below.

 <button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:$parent.addCustomOptions()">
    <span>Cancel</span>
</button>

Related Solutions

Magento – Magento 2 – Will x-magento-init tag apply from a html template

I'm still not entirely sure on what data you need to pass through, you can pass data to HTML templates the same was you would to a PHTML template.

A simple example:

Ben/TemplateTest/view/frontend/templates/container.phtml

<div data-bind="scope: 'templateTest'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "templateTest": {
                        "component": "Ben_TemplateTest/js/template-test"
                    }
                }
            }
        }
    }
</script>

Ben/TemplateTest/view/frontend/web/template/test.html

<h2>Template Test</h2>

<p data-bind="text: message"></p>

Ben/TemplateTest/view/frontend/web/js/template-test.js

define(['jquery', 'ko', 'uiComponent', 'domReady!'], function($, ko, Component) {
    'use strict';

    return Component.extend({
        initialize: function() {
            this._super();
        },

        defaults: {
            message: 'This is a test message!',
            template: 'Ben_TemplateTest/test'
        }
    });
});

Here you can see the data being passed through to the HTML template.

Adding extra templates

To call additional templates you can use:

<!-- ko template: "Package_Namespace/template-name" --><!-- /ko -->

Or pass it a property from your JS:

<!-- ko template: someProp --><!-- /ko -->

Magento 2 – Add New Field to Magento_User Admin Form

For adding image field, you can try using plugin and always try to avoid overwrite whole class.

Vendor/Module/etc/adminhtml/di.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\User\Block\User\Edit\Tab\Main">
        <plugin name="sr_stackexchange_user_form" type="Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab\Main" sortOrder="1"/>
    </type>
</config>

Vendor/Module/Plugin/Block/Adminhtml/User/Edit/Tab/Main.php


namespace Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab;

class Main
{
    /**
     * Get form HTML
     *
     * @return string
     */
    public function aroundGetFormHtml(
        \Magento\User\Block\User\Edit\Tab\Main $subject,
        \Closure $proceed
    )
    {
        $form = $subject->getForm();
        if (is_object($form)) {
            $fieldset = $form->addFieldset('admin_user_image', ['legend' => __('User Image')]);
            $fieldset->addField(
                'user_image',
                'image',
                [
                    'name' => 'user_image',
                    'label' => __('Image'),
                    'id' => 'user_image',
                    'title' => __('Image'),
                    'required' => false,
                    'note' => 'Allow image type: jpg, jpeg, png'
                ]
            );

            $subject->setForm($form);
        }

        return $proceed();
    }
}

Clear cache.

Best Answer

Related Solutions

Magento – Magento 2 – Will x-magento-init tag apply from a html template

Adding extra templates

Magento 2 – Add New Field to Magento_User Admin Form

Related Topic