如何使用sapui5 splitapp控件动态绑定数据

我在JSONModel中存储了以下数据：

{
  "threshold":[
    {"thresholdName":"1","person":[
        {"name":"a","age":12,"task":[{"taskName":"task1"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"b","age":13,"task":[{"taskName":"task4"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"c","age":14,"task":[{"taskName":"task7"},{"taskName":"task2"},{"taskName":"task3"}]}
    ]},
   {"thresholdName":"2","person":[
        {"name":"d","age":12,"task":[{"taskName":"task1"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"e","age":13,"task":[{"taskName":"task4"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"f","age":14,"task":[{"taskName":"task7"},{"taskName":"task2"},{"taskName":"task3"}]}
    ]},
    {"thresholdName":"3","person":[
        {"name":"g","age":12,"task":[{"taskName":"task1"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"h","age":13,"task":[{"taskName":"task4"},{"taskName":"task2"},{"taskName":"task3"}]},
        {"name":"i","age":14,"task":[{"taskName":"task7"},{"taskName":"task2"},{"taskName":"task3"}]}
    ]}         
  ]
}

现在我想将它绑定到splitApp控件 xmlview如下所示：

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
    controllerName="sap.ui.demo.wt.controller.index"
    xmlns="sap.m">
    <SplitApp id="SplitAppDemo" initialDetail="detail" initialMaster="master" orientationChange="onOrientationChange">
        <detailPages>
            <Page id="detail" title="Detail 1" class="sapUiStdPage">
                <content>                   
                 <Label text="Detail page 1" />
                 <Button text="Go to Detail page2" press="onPressNavToDetail" />
                </content>
            </Page>
            <Page id="detailDetail" title="Detail Detail" class="sapUiStdPage" showNavButton="true"
                  navButtonText="Back" navButtonPress="onPressDetailBack">
                <content>
                    <VBox class="sapUiSmallMargin">
                        <Label text="This is Detail Page2" />
                        <Text text="Here you could change the Split Application mode. After the mode change, resize the browser window to see the difference in the master form behaviour." />
                        <RadioButtonGroup columns="1" width="500px" class="sapUiMediumMarginBottom" select="onPressModeBtn">
                            <buttons>
 <RadioButton id="RB1-1" text="show/hide" selected="true" 
    custom:splitAppMode="ShowHideMode" />
    <RadioButton id="RB1-2" text="stretch/compress" 
   custom:splitAppMode="StretchCompressMode" />
    <RadioButton id="RB1-3" text="hide" custom:splitAppMode="HideMode" />
    <RadioButton id="RB1-4" text="popover" custom:splitAppMode="PopoverMode" />
                            </buttons>
                        </RadioButtonGroup>
                    </VBox>
                </content>
            </Page>
            <Page id="detail2" title="Detail 3 Page" class="sapUiStdPage" showNavButton="true"
                  navButtonText="Back" navButtonPress="onPressDetailBack">

                <content>
                    <Label text="This is Detail Page3" />
                    <Input/>
                    <Label text="Label 2" />
                    <Input/>
                    <Label text="Label 3" />
                    <Input/>
                    <Label text="Label 4" />
                    <Input/>
                    <Label text="Label 5" />
                    <Input/>
                </content>
            </Page>
        </detailPages>
        <masterPages>
            <Page id="master" title="threshold" icon="sap-icon://action" class="sapUiStdPage">
                <content>
                    <List id="list1" itemPress="onListItemPress" items="{path:'/threshold/'}">
                        <StandardListItem title="{thresholdName}" type="Navigation" press="onPressGoToMaster" ></StandardListItem>
                    </List>                                                                      
                </content>
            </Page>
            <Page id="master2" title="members" icon="sap-icon://action" class="sapUiStdPage" showNavButton="true" navButtonPress="onPressMasterBack">
                <content>
                    <List id="list2" itemPress="onListItemPress" items="{path:'/threshold/0/person'}" >
                            <StandardListItem title="{name}" type="Navigation" press="onPressGoToMaster3" ></StandardListItem>
                    </List>                                                 
                </content>
            </Page>
            <Page id="master3" title="taskflow" icon="sap-icon://action" class="sapUiStdPage" showNavButton="true" navButtonPress="onPressMasterBack">
                <content>
                    <List itemPress="onListItemPress" items="{path:'/threshold/0/person/0/task/'}">
                            <StandardListItem title="{taskName}" type="Active" custom:to="detail"></StandardListItem>
                    </List>
                </content>
            </Page>
        </masterPages>
    </SplitApp>
</mvc:View>

sap.ui.define([
        'jquery.sap.global',
        'sap/m/MessageToast',
        'sap/ui/core/Fragment',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/Filter',
        'sap/ui/model/json/JSONModel'
    ], function(jQuery, MessageToast, Fragment, Controller, Filter, JSONModel) {
    "use strict";
    var CController = Controller.extend("sap.ui.demo.wt.controller.index", {

        onInit: function(){
            var oModel =new JSONModel('model/threshold.json');          
            this.getView().setModel(oModel);

            this.getSplitAppObj().setHomeIcon({
                'phone':'phone-icon.png',
                'tablet':'tablet-icon.png',
                'icon':'desktop.ico'
            });
        },

        onOrientationChange: function(oEvent) {
            var bLandscapeOrientation = oEvent.getParameter("landscape"),
                sMsg = "Orientation now is: " + (bLandscapeOrientation ? "Landscape" : "Portrait");
            MessageToast.show(sMsg, {duration: 5000});
        },

        onPressNavToDetail : function(oEvent) {

            this.getSplitAppObj().to(this.createId("detailDetail"));
        },

        onPressDetailBack : function() {
            this.getSplitAppObj().backDetail();
        },

        onPressMasterBack : function() {            
            this.getSplitAppObj().backMaster();     
        },

        onPressGoToMaster : function(oEvent) {                      
            this.getSplitAppObj().toMaster(this.createId("master2"));
        },
        onPressGoToMaster3:function(){          
            this.getSplitAppObj().toMaster(this.createId("master3"));
        },  
        onListItemPress : function(oEvent) {
            var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();              
            this.getSplitAppObj().toDetail(this.createId(sToPageId));           
        },
        onPressModeBtn : function(oEvent) {
            var sSplitAppMode = oEvent.getSource().getSelectedButton().getCustomData()[0].getValue();
            this.getSplitAppObj().setMode(sSplitAppMode);
            MessageToast.show("Split Container mode is changed to: " + sSplitAppMode, {duration: 5000});
        }, 
        getSplitAppObj : function() {
            var result = this.byId("SplitAppDemo");
            if (!result) 
            {
     jQuery.sap.log.info("SplitApp object can't be found");
            }
            return result;
        }

    });

    return CController;

});

效果如图所示：

但我使用的是一种静态绑定方法，如下所示 items={path:'/threshold/'}，items={path:'/threshold/0/person'}， items={path:'/threshold/0/person/0/task/'}

我想在上次单击时更改“项目”属性。 因此，我想在onPressGoToMaster事件中设置第二页 项目，然后到StandardListItem控件绑定title属性以实现动态绑定。我尝试使用：

this.getView.ById list2.GetProperty项 this.getView.ById list1.GetAggregation项 This.getView.ById list2.GetItems

---

和许多其他方法，但我无法获取列表控件的Items属性。我应该如何解决这样的问题？

您的问题与SplitApp无关，它与UI5中数据绑定的一般概念有关。实际上，您在所有页面中都使用了绝对绑定路径，但至少在第二和第三个母版页中，您需要相对绑定路径，因为数据依赖于先前选择的模型数据。绝对路径和相对路径之间的区别是什么：

绝对绑定路径始终以斜杠开始，并从数据结构的根开始。应用程序中的示例包括：

/threshold
/threshold/0/person
/threshold/0/person/0/task

相对绑定路径以属性开始，并相对于绑定上下文进行解析，您可以将绑定上下文想象为结构中的指针。您已经使用了这些相对路径。例如，在您使用的第一个母版页中：

thresholdName

它将使用绑定上下文自动相对于阈值数组中的每个条目进行解析。您可以了解有关绑定路径的更多信息。在使用JSONModel时，还需要了解所描述的相应绑定语法

您需要解决的问题是在代码中获取绑定上下文并将其应用于后续母版页。我在JS Bin收养了你。它是如何工作的

press事件处理程序获取触发事件的控件的绑定上下文。这是通过以下方式完成的：

oEvent.getSource().getBindingContext().getPath();

这是一种通用方式，因为运行时会自动为您创建此绑定上下文。例如，第一个母版页上的第二项具有绑定上下文：

/threshold/1

您可以使用该方法传递此信息。这些信息在页面控件事件中可用，请参见示例中的onInit方法。您需要知道的是告诉运行时使用提供的信息作为绑定上下文。这是用方法完成的。在本例中，我们可以直接从传递的事件对象获取相应的页面，并从随事件一起传递的数据对象获取路径：

let path = oEvent.data.path;
let page = oEvent.to;
page.bindElement(path);

---

请注意，路径只是我在这里使用的一个名称，您可以自由使用其他名称。此外，oEvent.to仅适用于SplitApp场景。如果您处理其他控件的事件，请检查API。

衷心感谢您的回答，不仅告诉了我不足之处，我还学会了如何使用jsbin show sapui5代码