SAPUI5：如何從json模型更新視圖中的標籤？

Question

嗨我需要幫助與更新我的標籤在一個視圖中使用json模型的新值每次單擊一個按鈕。你如何在SAPUI5中做到這一點？

您可以看到問題文本和答案文本來自問卷模型我想從數據[0] .question.text更新爲數據1 .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

我建議你要麼儲存當前索引或爲您的當前選擇的問題，一個單獨的模型。例如。

您可以定義初始化的方法和/或獲取下一個元素

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); 
} 

回答更新（如上圖），以顯示incease。

缺少什麼：加載之前檢查下一個索引是否存在