Question

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

Array
(
    [0] => type
    [1] => colorScheme
    [2] => template
)

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

{
  "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"}]}
    ]}         
  ]
}

controller.js如下：

<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>

效果如图Click here to view the picture

所示

但我正在使用这样的静态绑定方法 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属性随着我的最后一次点击而改变。所以我想在items="{path:'/threshold/0/person/0/task/'}"事件中设置第二页 items，然后到onPressGoToMaster控件绑定StandardListItem属性来实现动态绑定。我尝试使用：

title
this.getView ().ById ("list2").GetProperty ("items")
this.getView ().ById ("list1").GetAggregation ("items")

和许多其他方法但我无法获得List控件的This.getView ().ById ("list2").GetItems ()属性。我该如何解决这个问题？

Answer 1

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

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

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

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

thresholdName

使用绑定上下文自动解决相对于threshold数组中每个条目的问题。您可以了解有关绑定路径here的更多信息。当您使用JSONModel时，您还需要一些有关相应绑定语法的知识，这些语法描述为here。

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

press事件处理程序获取触发事件的控件的绑定上下文。这完成了：

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

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

/threshold/1

您可以使用toMaster方法传递此信息。页面控件的beforeShow事件中提供了这些信息（请参阅示例中的onInit方法）。您需要知道的是告诉运行时将提供的信息用作绑定上下文。这是通过方法bindElement完成的。在这个例子中，我们可以直接从传递的事件对象获取相应的页面，并从事件中传递数据对象的路径：

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

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

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

1 个答案: