Magento2: How to pass data from model file to knockout.js?

Question

I want to pass the data from model file to knockout.js in Magento2.

My Code:

Model file:

<?php
namespace Amy\MyPackage\Model\Total\Quote;
/**
* Class Custom
* @package Mageplaza\HelloWorld\Model\Total\Quote
*/
class Package extends \Magento\Quote\Model\Quote\Address\Total\AbstractTotal
{
   /**
    * @var \Magento\Framework\Pricing\PriceCurrencyInterface
    */
   protected $_priceCurrency;
   /**
    * Custom constructor.
    * @param \Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
    */
   public function __construct(
       \Magento\Framework\Pricing\PriceCurrencyInterface $priceCurrency
   ){
       $this->_priceCurrency = $priceCurrency;
   }
   /**
    * @param \Magento\Quote\Model\Quote $quote
    * @param \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment
    * @param \Magento\Quote\Model\Quote\Address\Total $total
    * @return $this|bool
    */
   public function collect(
       \Magento\Quote\Model\Quote $quote,
       \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment,
       \Magento\Quote\Model\Quote\Address\Total $total
   )
   {
       parent::collect($quote, $shippingAssignment, $total);

          $objectManager      = \Magento\Framework\App\ObjectManager::getInstance();        
          $customerSession    = $objectManager->get('\Magento\Customer\Model\Session');  
          $customerId         = $customerSession->getCustomer()->getId(); 
          $customerPackageId  = $customerSession->getCustomer()->getPackagePercentage(); 

          return $customerPackageId;

   }
}

js file:

define(
   [
       'jquery',
       'Magento_Checkout/js/view/summary/abstract-total'
   ],
   function ($,Component) {
       "use strict";
       return Component.extend({
           defaults: {
               template: 'Amy_MyPackage/checkout/summary/discount'
           },
           isDisplayedDiscount : function(){
               return true;
           },
           getDiscount : function(){
               return customerPackageId;
           }
       });
   }
);

HTML file:(binding the data)

<!-- ko if: isDisplayedDiscount() -->
<tr class="totals discount excl">
   <th class="mark" colspan="1" scope="row" data-bind="text: discount"></th>
   <td class="amount">
       <span class="price" data-bind="text: getDiscount(), attr: {'data-th': discount}"></span>
   </td>
</tr>
<!-- /ko -->

As I am new to knockoutjs, please help me

Any help would be appreciated.

Answer 1

Check the below code for your reference.

Pass your collection/data through the config variable and get it when your component initialize.

<?php
    $collection = 'Store collection in this variable and pass on customCollection variable';
?>

<div id="component-Id" data-bind="scope:'customComponent'">
<script type="text/x-magento-init">
    {
        "#component-Id": {
            "Magento_Ui/js/core/app": {
               "customComponent": {
                    "ko": {
                        "component": "vendor_module/js/YourJs",
                        "template" : "vendor_module/YourTemplate",
                        "customCollection": <?= /* @escapeNotVerified */ $collection ?>
                    }
                }
            }
        }
    }
    </script>
</div>

YourJs.js

define(['uiComponent', 'ko', 'jquery'], function (Component, ko, jquery) {

    return Component.extend({
        initialize: function (config) {
            var self = this;
            this._super();
            var yourCollection = config.customCollection;
            console.log(yourCollection);
        },
});

I Hope it'll help you.