Question

I have a viewmodel (survey) that has a member (questions.current) which is an indexer pointing to the current question. Each question has a property (.text) that needs to be bound to the screen. Here is the scenario:

survey.questions.current.text
survey.questions.movenext()

I want the text on the screen to display the text value for the current question. As I move forward, I want this text to be automatically updated.

One way to handle it is to have an (ko.observable) survey.questions.currentText property that is automatically updated whenever a movenext or moveprevious function is executed. However, this may not be the cleanest approach as I have other values (including choices related to the individual question) that also need to be updated on the screen and I don’t want to have to create duplicates for each of the properties.

Making the text property an observable is not appropriate as the question text never changes. It is the currently selected question that is changed and that needs to trigger an update to the items on the screen.

What is the proper way to handle this?

Answer 1

The with binding is one option, as demonstrated here, and in this fiddle. Since currentQuestion is an observable, the virtual element will update with it, even if the bindings are to non-observable properties.

<!-- ko with: currentQuestion-->
    <span data-bind="text: text"></span>
<!-- /ko -->​

I didn’t know how you were actually changing the selection, so I just tied it to a select, but you can make the selection however you want.