jsViews dynamic linking to a different item in array

Question

I am trying to have a dynamic if linking to a property of a different item in an array.

My current code:

Loader

for (...) {

    var index = this.App.Data.Questions.push({
       ...
    }) - 1;

    if (CompareGuids(this.App.Data.Questions[index].QuestionId, '06EF685A-629C-42A5-9394-ACDEDF4798A5')) {
        this.App.PregnancyQuestionId = index;
    }

Template

{^{if ~root.Data.Questions[~root.PregnancyQuestionId].Response.ResponseText == "true"}}
   {{include #data tmpl="Clinical-History-QuestionWrapper-SingleQuestion"/}}
{{/if}}

It works for the initial loading, but it does not update.

Note I assume I could achieve this with a boolean property in ~root, and then have a $.observable(...).oberserve(...) update this property, but I would prefer to have a direct access.

Answer 1

It looks like all you need to do is make sure that you are changing the PregnancyQuestionId observably. Just assigning a value cannot trigger data-linking to update the UI.

You need to write:

$.observable(this.App).setProperty("PregnancyQuestionId", index);

That should then trigger the binding correctly...