Knockout library not working

[levimatheri]

Are you requesting a feature, reporting a bug or ask a question?

Bug

What is the current behavior?

Survey not rendering using knockout library

What is the expected behavior?

Survey should render as before

How would you reproduce the current behavior (if this is a bug)?

I did not change anything in my code, it was working 2 months ago, then fired it up today and survey doesn't render. I'm using the latest knockout library

Provide the test code and the tested page URL (if applicable)

The example in the documentation also doesn't work, see https://surveyjs.io/form-library/documentation/get-started-knockout.

[JaneSjs]

Hello, Please update your code and create a survey model using the SurveyKnockout.Survey instance:

const survey = new SurveyKnockout.Survey(surveyJson);

The updated example: https://codepen.io/JaneGaid/pen/JjveKmB.

We'll update our documentation shortly. Thank you

[levimatheri]

Thanks @JaneGaid

[dasboe]

I have the same issue. Could you please explain why this has changed.

Could you also give an example how to use it within a node app and how to import the modules correctly?

This is what I have but the layout is now broken without any styling.

html

<div id="survey"></div>

js

import { StylesManager } from "survey-core"
import * as SurveyKnockout from "survey-knockout"

StylesManager.applyTheme("defaultV2")
let survey = new SurveyKnockout.Survey(surveyDefinition)
survey.render("survey")

StylesManager.applyTheme("defaultV2")

css

@import "~survey-core/defaultV2.min.css"

[dasboe]

Is this supposed to work on 1.9.54? I'm still having problems.

[tsv2013]

You can use our framework-specific libraries in two ways. I'll try to explain how for KnockoutJS framework

1. You can use the "survey-knockout" library. It exports global variable "Survey". And you can use the "Model" object from it as you did it earlier. No changes at all.

   var survey = new Survey.Model(json);
   survey.render("surveyContainerId");

2. You can use the "survey-core" and "survey-knockout-ui" pair of our libraries. In this case you can use our libraries in more "knockout" way:

   <survey params="survey: model"></survey>

   var survey = new Survey.Model(json);
   ko.applyBindings({ model: survey });

You can also use the render function for the "Survey" class:

var survey = new SurveyKnockout.Survey(json);
survey.render("surveyContainerId");

but it's not a native "knockout" approach and not recommended at this momemt.

I've updated our documentation and demos accordingly.

IMPORTANT NOTE You can't use "survey-knockout" and "survey-knockout-ui" at the same time - these libraries register the same components. This is the case you described in this thread - https://github.com/surveyjs/survey-library/issues/5080. If you are using SurveyJS Creator V2, then you should use "survey-core" and "survey-knockout-ui" pair of our libraries.

[dasboe]

The Problem is when I'm not using SurveyKnockout like I did before my Survey is not rendering anymore like @levimatheri has described in this issue. I only started using SurveyKnockout because it was suggested here: https://github.com/surveyjs/survey-library/issues/4996#issuecomment-1272866254

Is there a fix for this in https://github.com/surveyjs/survey-library/commit/76f7bdf944947004c7ac7f686998c6f80aa23456 I should wait for in a future version?

[tsv2013]

We changed this behavior because "survey-core" library that contains the "Model" class should be platform agnostic. The "survey-knockout" library write it own reactivity infrastructure in the "Survey.Model" class that made "survey-core" unusable with other platforms and products together with "survey-knockout-ui" library. And this was fixed. Unfortunately this become a breaking change. But this breaking change is related to those who used "survey-knockout-ui" library. For "survey-knockout" library users all still the same. Right now we don't have plans to revert this back because this was the bug.

[ramonwenger]

Thank you for your explanation, @tsv2013.

There's a problem with your approach though; You've released this change as a PATCH-level release, somewhere between 1.9.41 and 1.9.55 (someone else could certainly point to the exact version where this changed). NPM will happily update from 1.9.41 to 1.9.55 without asking, if one does not lock the version down specifically. This will break a lot of people's apps.

SemVer (like you're seemingly using for this library) stipulates using MAJOR versions for introducing breaking changes (e.g. 2.0.0). So this change to the knockout library should probably have been a major update instead of a patch.

[tsv2013]

@ramonwenger Yes, it's my bad.