I need to access to a javascript module observables and functions so the template does not throws error.
I have my template.html template doing this:
<!-- ko template: "Vendor_ManualShipping/external-template" --><!-- /ko -->
In the js related to that template, of course I have not that functions or observable, because that template is like this:
external-template.html
<div class="manualshipping-container__selectors">
<select
name="region"
id="region_checkout"
class="input-text"
title="region_checkout"
data-bind="options: availableStates,
value: selectedState,
optionsCaption: 'Selecciona tu Estado'"
></select>
<select
name="municipio"
id="municipio_checkout"
class="input-text"
title="municipio_checkout"
data-bind="options: availableCities,
value: selectedCity,
optionsCaption: 'Selecciona tu Ciudad'"
></select>
<a class="action primary continue btn-show" data-bind="click: getPharmaciesInfo" href="#">
<span translate="'Buscar'"/>
</a>
</div>
When I use template.html it throws an error saying availableStates is undefined, of course because I have no availableStates in my js, but then how can I use the javascript of the external template?
I have tried this:
define([
'jquery',
'uiComponent',
'ko',
'Magento_Checkout/js/model/quote',
'mage/url',
'Magento_Ui/js/modal/modal',
'Vendor_ManualShipping/js/view/external-js'
], function ($,Component, ko, quote, url, modal, manualShipping) {
'use strict';
This did not worked.
So how then can I have an external template working on another template?
Thanks!