SAPUI5：如何从 json 模型更新视图中的标签？

Question

您好，每次单击按钮时，我都需要帮助使用 json 模型中的新值更新视图中的标签。在 SAPUI5 中如何做到这一点？

您可以看到我想从我的工具栏文本中显示的 data[0].question.text 更新为 data1.question.text 的问卷模型中的问题文本和答案文本。在 SAPUI5 中如何实现？

我使用工具栏标题作为问题文本并使用不同标签作为选项？这是正确的方法吗？我可以更新工具栏标题文本吗？

请找到以下代码：

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.onlinequestionnaire.controller.App" height="100%">
<Page title="Online Questionnaire" class="sapUiContentPadding" id="myPage">
    <headerContent>
        <Button icon="sap-icon://action" tooltip="Share"/>
    </headerContent>
    <subHeader/>
    <content>
        <VBox class="sapUiSmallMargin">
            <f:SimpleForm id="SimpleFormToolbar" layout="ResponsiveGridLayout">
                <f:toolbar>
                    <Toolbar id="TB1">
                        <Title text="Question 1" level="H4" titleStyle="H4"/>
                        <ToolbarSpacer/>
                        <Button icon="sap-icon://drop-down-list"/>
                    </Toolbar>
                </f:toolbar>
                <f:content>
                    <Toolbar design="Solid">
                        <Title text="{questionnaire>/data/0/question/text}" level="H5" titleStyle="H5" textAlign="Center" id="questionText"/>
                    </Toolbar>
                    <VBox id="multipleChoiceHolder">
                        <HBox id="answerRow1">
                            <HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder1"><CheckBox id="checkBox1"/><Label text="Dogs" id="multipleChoice1"/></HBox>
                            <HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder2"><CheckBox id="checkBox2"/><Label text="Cats" id="multipleChoice2"/></HBox>
                        </HBox>
                        <HBox id="answerRow2">
                            <HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder3"><CheckBox id="checkBox3"/><Label text="Rabbits" id="multipleChoice3"/></HBox>
                            <HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder4"><CheckBox id="checkBox4"/><Label text="Hamsters" id="multipleChoice4"/></HBox>
                        </HBox>
                    </VBox> </f:content>
            </f:SimpleForm>
        </VBox>
    </content>
    <footer>
        <Toolbar id="toolBar">
            <Button text="Previous" type="Emphasized" width="300px" press="goToPrevious" icon="sap-icon://navigation-left-arrow" id="previousButton"/>
            <ToolbarSpacer/>
            <Button text="Next" type="Emphasized" width="300px" press="goToNext" icon="sap-icon://navigation-right-arrow" iconFirst="false"
                id="nextButton"/>
        </Toolbar>
    </footer>
</Page>

questionnaire.json

{ data: [{
    "question": "Which pet do you like from the following?",
    "answers": ["Cats", "Rabbits", "Dogs", "Hamsters"],
    "correct": 1
}, {
    "question": "Which pet do you prefer from the following?",
    "answers": ["Cats", "Dogs"],
    "correct": 1
}, {
    "question": "What food brand does your pet eat?",
    "answers": ["Pedigree", "Catfood", "Rabbitfood", "HamstersFood"],

    "correct": 1
}]
}

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller){


Controller.extend("opensap.onlinequestionnaire.controller.App", {
    goToPrevious:function(){
        alert("Previous Question");
    },
    goToNext:function(){
        alert("Next Question");
    }
});

});

我的前端是这样的： My Frontend looks like this:

Answer 1

我建议您存储当前索引或为您当前选择的问题创建一个单独的模型。例如

this.getView().setModel(new JSONModel({
    index: false,
    question: {}
}), 'currentQuestion');

你可以定义一个方法来初始化和/或获取下一个元素

initOrSetNext: function() {
  var oCurrentQuestionModel = this.getView().getModel('currentQuestion');
  var oQuestionModel = this.getView().getModel('questionnaire');
  var iCurrentIndex = oCurrentQuestionModel.getProperty('/index');

  // if run first time set to 0 - else increase by one
  iCurrentIndex = iCurrentIndex ? ++iCurrentIndex : 0;

  var oCurrent = {
     index : iCurrentIndex,
     question: oQuestionModel.getProperty('/data/' + iCurrentIndex);
  }
  oCurrentQuestionModel.setProperty('/', oCurrent);
}

答案已更新（上图）以显示增加。

缺少什么：在加载前检查下一个索引是否存在