SAP CPQ - Quote 2.0: Responsive Templates - How to assign a ViewModel to a View within Configurator?

[Alexander_0001]

Dear SAP Community,

I want to implement a simple KnockoutJS code example within the Responsive Template of the Configurator Page.

This is my View in the HTML Template (ConfiguratorView)

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

I tried to add my own View Model in the provided CustomCode Template

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

As final step I have added ko.applyBindings(new AppViewModel()); to the CustomCode Template as well so that my ViewModel will be applied to my Views firstName and lastName.

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Unfortunately when I activate the responsive template elements ConfigurationView and CustomCode with this code in it the custom code wont be executed because of the ko.applyBindings(new AppViewModel());.kI have also tried to implement the custom binding example from the SAP Help portal and it worked kills the whole usability of SAP CPQ. The website allows no interaction, clicks or other events any more until I have removed ko.applyBindings(new AppViewModel()); from the template again.

Has someone already faced this issue and found a solution for using ko.applyBindings();
I would be very grateful if you you let me know what was your solution was and how you did it.

Kind regards,

Alexander März

Maybe you guys have the experience:

sbslmhmt maxgag2 ivan.petrovic01 slyakh2


P.S.
I have also tried the following:

<div id="exampleWidget" class="center-block">
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <p>Full name: <strong data-bind="text: fullName"></strong></p>
        </div>

With the following Custom Script...

<script type="text/javascript"><br>function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
}, this);
};


// Activates knockout.js ko.applyBindings(new AppViewModel());
ko.applyBindings(AppViewModel(), document.getElementById("exampleWidget"));
<script>

It was not successful as well.
I look forward to any advice.

Thank you