0

I am using Magento 2.1.0, and i am trying to create tab on frontend by using knockout js. i checked so many tutorial, in which one i refer

http://jsfiddle.net/NLGm8/32/

I created Phtml file

<div id="block-priscription-requested" data-bind="scope:'tab-prereq'" class="block">


<!-- ko template: getTemplate() --><!-- /ko -->

<script type="text/x-magento-init">

{

    "#block-priscription-requested": {

        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

    }

}

and Layout file:

<body>
    <referenceContainer name="content">
        <block class="XXXX\XXX\Block\Index" name="doctor.index" template="XXXX_XXX::index.phtml">
            <arguments>

                <argument name="jsLayout" xsi:type="array">

                    <item name="components" xsi:type="array">

                        <item name="tab-prereq" xsi:type="array">

                            <item name="component" xsi:type="string">XXXX_XXXXX/js/view/prereq</item>

                        </item>

                    </item>

                </argument>

            </arguments>

        </block>

    </referenceContainer>
</body>

js code:

define(
[
    'jquery',
    'ko',
    'uiComponent',
],
function ($, ko, component) {
    "use strict";

ko.bindingHandlers.jqTabs = {
init: function(element, valueAccessor) {
    var options = valueAccessor() || {};
    setTimeout( function() { $(element).tabs(options); }, 0);
}
  };


    function Tab(id, title, titleTmpl, content, contentTmpl) {
 return {
    id: ko.observable(id),
    titleData: ko.observable(title),
    titleTmpl: titleTmpl,
    contentData: ko.observable(content),
    contentTmpl: contentTmpl 
};
        }

       var viewModel = {
tabs: ko.observableArray([
    new Tab(1, 
            { name: "one", date: new Date() }, 
            "normalTitleTmpl",
            { content: "one content", date: new Date() } ,
            "normalContentTmpl"),
    new Tab(2, 
            { name: "two", special: "special title!" }, 
            "specialTitleTmpl",
            { content: "two content", date: new Date() } ,
            "normalContentTmpl"),
    new Tab(3, 
            { name: "three", date: new Date() }, 
            "normalTitleTmpl",
            { content: "three content", special: "special content" } ,
            "specialContentTmpl")
])
    };

ko.applyBindings(viewModel);

But on frontend nothing is showing.

  • Can you include your JS please? It doesn't look like you've defined or called a template – Ben Crook Mar 9 '17 at 11:45
  • now check updated code – sam Mar 9 '17 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.