如何将列表绑定到导航属性

时间:2015-09-16 20:00:59

标签: odata sapui5 sap-fiori

我有一个目录和文件的主/详细应用程序。在我的OData服务中,我有一个导航属性,从目录到一组文件。我在详细信息视图中有一个列表,用于目录的文件。但我无法将其绑定到OData服务的导航属性

<mvc:View xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="FileUtility.view.Detail">
    <Page id="detailPage" navButtonPress="onNavBack" showNavButton="{device&gt;/isPhone}" title="Files">
        <content>
            <ObjectHeader iconActive="false" id="detailHeader" introActive="false" number="" numberUnit="" title="" titleActive="false">
                <attributes id="detailAttributes">
                    <ObjectAttribute active="false" id="attribute" text="{i18n&gt;detailText}"/>
                </attributes>
                <firstStatus id="detailStatus">
                    <ObjectStatus id="status" text=""/>
                </firstStatus>
            </ObjectHeader>
            <List id="__list0" noDataText="Drop list items here" items="{path :'DirectorySet>/FileSet'}">
                <items>
                <ObjectListItem counter="0" id="__item5" showMarkers="false" title="{Name}" type="Active">
                </ObjectListItem>
                </items>
                <core:ExtensionPoint name="extDetail"/>
            </List>
        </content>
        <footer id="detailFooter">
            <Toolbar id="detailToolbar">
                <content>
                    <ToolbarSpacer id="toolbarSpacer"/>
                    <Button icon="sap-icon://action" id="actionButton" press="openActionSheet"/>
                </content>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

项目路径是源实体集名称。不知道我应该在哪里得到这个名字。 FileSet部分来自navigation属性。我很困惑如何在视图中映射它。

编辑:我已删除了&#34; item = {}&#34;从List标签中尝试将其绑定在Detail.js文件中。

sap.ui.core.mvc.Controller.extend("FileUtility.view.Detail", {

    onInit : function() {
        this.oInitialLoadFinishedDeferred = jQuery.Deferred();

        if(sap.ui.Device.system.phone) {
            //Do not wait for the master when in mobile phone resolution
            this.oInitialLoadFinishedDeferred.resolve();
        } else {
            this.getView().setBusy(true);
            var oEventBus = this.getEventBus(); 
            oEventBus.subscribe("Component", "MetadataFailed", this.onMetadataFailed, this);
            oEventBus.subscribe("Master", "InitialLoadFinished", this.onMasterLoaded, this);
        }

        this.getRouter().attachRouteMatched(this.onRouteMatched, this);
    },

    onMasterLoaded :  function (sChannel, sEvent) {
        this.getView().setBusy(false);
        this.oInitialLoadFinishedDeferred.resolve();
    },

    onMetadataFailed : function(){
        this.getView().setBusy(false);
        this.oInitialLoadFinishedDeferred.resolve();
        this.showEmptyView();       
    },

    onRouteMatched : function(oEvent) {
        var oParameters = oEvent.getParameters();
        var oView = this.getView();
        var sEntityPath = "/" + oParameters.arguments.entity;

        var oContext = new sap.ui.model.Binding(this.getView().getModel(), sEntityPath + '/FileSet');
        this.getView().setBindingContext(oContext);
        //var oList = oView.byId("__list0");
        //oList.bindItems(sEntityPath + '/FileSet',sap.ui.getCore().byId(this.getView().byId('__item5').getId()));
        //sap.ui.getCore().byId(this.getView().byId('__list0').getId()).bindItems(sEntityPath + '/FileSet',sap.ui.getCore().byId(this.getView().byId('__item5').getId()));

        //this.bindView(sEntityPath);

        jQuery.when(this.oInitialLoadFinishedDeferred).then(jQuery.proxy(function () {


            // When navigating in the Detail page, update the binding context 
            if (oParameters.name !== "detail") { 
                return;
            }




            var oIconTabBar = oView.byId("idIconTabBar");
            oIconTabBar.getItems().forEach(function(oItem) {
                if(oItem.getKey() !== "selfInfo"){
                    oItem.bindElement(oItem.getKey());
                }
            });

            //var oList = oView.byId("__list0");
            //oList.bindItems(sEntityPath + '/FileSet');
            //sap.ui.getCore().byId(this.getView().byId('__list0').getId()).bindItems(sEntityPath + '/FileSet',sap.ui.getCore().byId(this.getView().byId('__item0').getId()));

            // Specify the tab being focused
            var sTabKey = oParameters.arguments.tab;
            this.getEventBus().publish("Detail", "TabChanged", { sTabKey : sTabKey });

            if (oIconTabBar.getSelectedKey() !== sTabKey) {
                oIconTabBar.setSelectedKey(sTabKey);
            }
        }, this));

    },

    bindView : function (sEntityPath) {
        var oView = this.getView();
        oView.bindElement(sEntityPath); 

        //Check if the data is already on the client
        if(!oView.getModel().getData(sEntityPath)) {

            // Check that the entity specified was found.
            oView.getElementBinding().attachEventOnce("dataReceived", jQuery.proxy(function() {
                var oData = oView.getModel().getData(sEntityPath);
                if (!oData) {
                    this.showEmptyView();
                    this.fireDetailNotFound();
                } else {
                    this.fireDetailChanged(sEntityPath);
                }
            }, this));

        } else {
            this.fireDetailChanged(sEntityPath);
        }

    },

    showEmptyView : function () {
        this.getRouter().myNavToWithoutHash({ 
            currentView : this.getView(),
            targetViewName : "FileUtility.view.NotFound",
            targetViewType : "XML"
        });
    },

    fireDetailChanged : function (sEntityPath) {
        this.getEventBus().publish("Detail", "Changed", { sEntityPath : sEntityPath });
    },

    fireDetailNotFound : function () {
        this.getEventBus().publish("Detail", "NotFound");
    },

    onNavBack : function() {
        // This is only relevant when running on phone devices
        this.getRouter().myNavBack("main");
    },

    onDetailSelect : function(oEvent) {
        sap.ui.core.UIComponent.getRouterFor(this).navTo("detail",{
            entity : oEvent.getSource().getBindingContext().getPath().slice(1),
            tab: oEvent.getParameter("selectedKey")
        }, true);
    },

    openActionSheet: function() {

        if (!this._oActionSheet) {
            this._oActionSheet = new sap.m.ActionSheet({
                buttons: new sap.ushell.ui.footerbar.AddBookmarkButton()
            });
            this._oActionSheet.setShowCancelButton(true);
            this._oActionSheet.setPlacement(sap.m.PlacementType.Top);
        }

        this._oActionSheet.openBy(this.getView().byId("actionButton"));
    },

    getEventBus : function () {
        return sap.ui.getCore().getEventBus();
    },

    getRouter : function () {
        return sap.ui.core.UIComponent.getRouterFor(this);
    },

    onExit : function(oEvent){
        var oEventBus = this.getEventBus();
        oEventBus.unsubscribe("Master", "InitialLoadFinished", this.onMasterLoaded, this);
        oEventBus.unsubscribe("Component", "MetadataFailed", this.onMetadataFailed, this);
        if (this._oActionSheet) {
            this._oActionSheet.destroy();
            this._oActionSheet = null;
        }
    }
});

我已将绑定代码添加到&#34; onRouteMatched&#34;方法

编辑2:

我在控制器中的绑定:

var oList = oView.byId("__list0");
var oTemplate = this.getView().byId('__item5');
oList.bindItems(sEntityPath + '/FileSet',sap.ui.getCore().byId(oTemplate.getId()));

我没有收到任何数据但是SAPUI5调试器中的路径是正确的,尽管被标记为&#34;无效&#34;

编辑3

我在onRouteMatched函数

中使用此代码
var oList = oView.byId("__list0");
var oTemplate = oView.byId('__item5');
oTemplate.bindProperty('title', 'Name');
oList.bindItems(sEntityPath + '/FileSet', sap.ui.getCore().byId(oTemplate.getId()));

2 个答案:

答案 0 :(得分:1)

我认为您缺少的只是在详细视图上设置绑定上下文(也许您还没有看到控制器代码)。
假设您有2个实体文件夹和文件。您的文件夹具有FileSet to Files的导航属性 现在您将Folders实体绑定到Master实体。但是当您单击Master并且detail应该加载 A Folder 的文件时,您将把详细视图绑定到master中的选定条目。 如何在主视图中获取所选条目?
在Master上操作的事件处理程序中,您可以调用

this.getBindingContext().getPath() 

并将其传递给详细视图。详情请致电

var oContext = new sap.ui.model.Binding(oModel,sPath)
//sPath is the path from master view , oModel is the oData model of your application
this.getView().setModel(oModel);
this.getView().setBindingContext(oContext);
//Now the FileSet of your list will fire and load the data in your list.

希望这有帮助。

答案 1 :(得分:1)

您绑定到命名模型,但未在代码中引用“命名”模型。

即。在您的代码中

="{path :'DirectorySet>/FileSet'}">

但在您的控制器中,您的代码都没有引用此模型

e.g。

this.getView().getModel()

您应该指定模型的名称(因为您可以拥有多个模型,并且您似乎绑定到命名模型。 如果您最初为问题DirectorySet命名模型,请在相关操作中指定 - 例如:

this.getView().getModel("DirectorySet")

我没有通过所有代码,但这将是一个良好的开端。

<强> 编辑: 使用以下命令获取ACTUAL值:

jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['INFO']);
jQuery.sap.log.info("fully qualified path: " + sEntityPath + '/FileSet',sap.ui.getCore().byId(oTemplate.getId()));

只是想确保我们获得完整且正确的绑定路径。