SAPUI5 Binding Context for array hierarchy

Question

I have a questions object which contains an answers array

var oModel = new JSONModel({
    questions: [{
        order: 1,
        title: "",
        answers: [{
            sequence: 1,
            label: "Yes",
        }, {
            sequence: 3,
            label: "N/A",
        }]
    }]
});

And the context set as follows

this.getView().setModel(oModel, "viewmodel");
var oContext = oModel.createBindingContext("/questions/0/");
this.getView().setBindingContext(oContext, "viewmodel");

In my view, I can bind questions fine

<Input value="{viewmodel>title}"/>

However, updating the answers binding updates ALL the answer arrays in EVERY questions context!, e.g. below i'm binding to my current context (questions/0/) but update the label will update the answers for all questions....

<f:Form id="formCustomRadio" editable="true" visible="true" formContainers="{viewmodel>answers}">
    <f:layout>
        <f:ResponsiveGridLayout/>
    </f:layout>
    <f:formContainers>
        <f:FormContainer title="Answer {viewmodel>sequence}">
            <f:formElements>
                    <f:FormElement label=" {i18n>radioLabel}">
                        <f:fields>
                            <Input value="{viewmodel>label}"/>
                        </f:fields>

Any ideas?

Any advice at all? The binding of viewmodel>label is correctly set to questions/(context)/answers/(context). e.g questions/1/answers/0/ for the first label of the 2nd questions array/ The issue is both questions/0 and questions/1 are being updated with the change to questions/1/answers/0/label. In fact ALL answers for ALL question are being updated if just a single change is made to an element of answers. — Adam Harkus
I tried your given example and it works fine for me. Only the bound context is changing and not other( say context at /questions/1). Will it be possible for you to create a Plunker or create a github project for better understanding and debugging of the project. — Rahul Bhardwaj

Adam Harkus Adam Harkus · Accepted Answer · 2017-11-16T08:47:11

The issue was related to the the array push when creating new questions...

questionData.questions.push({
    order: questionData.questions.length + 1,
    title: questionData.questions[questionData.questions.length - 1].title,
    answers: questionData.questions[questionData.questions.length - 1].answers
});

As answers is an array of objects , you can't simply push to it as this creates duplicate references. That's the reason answers where duplicated after each update. Solution was to push each answer separately in a for loop.

    for (var i = 0; i < answerArray.length; i++) {

            questionData.questions[newIndex].answers.push({
                sequence: answerArray[i].sequence,
                label: answerArray[i].label,
                points: answerArray[i].points,
                imageFlag: answerArray[i].imageFlag,
                image: answerArray[i].image,
                mandatoryComments: answerArray[i].mandatoryComments,
                additionalQuestion: answerArray[i].additionalQuestion
            });
        }

SAPUI5 Binding Context for array hierarchy

1 Answers