sapui5 - 是否可以在一个 View 中使用 2 个模型

标签 sapui5

我被困在 SAPUI5 中是否可能有一个概念,并且由于在这个细节级别上文档可能有点难以使用,所以我在我的研究路径中比正常情况更早地提出了这个问题。主要是我不想花太多时间,如果有一个直接的“不”回答。

我有一个使用 JSON 模型的主从 View 的用例,但我必须生成自己的控件 - 我不能使用 SplitApp 等。

该模型实际上是一个 2 层深的树,掌握导致细节。概念上是这样的:

{ 
    "master": [
        {
            "name": "Master 1",
            "detail" : [
                {
                "name": "Detail 1-1"
                },
                {
                "name": "Detail 1-2"
                }
            ]
        },
        {
            "name": "Master 2",
            "detail" : [
                {
                "name": "Detail 2-1"
                },
                {
                "name": "Detail 2-2"
                }
            ]
        }
    ]
}   

用户体验是会有一个可选择的主人列表,当做出选择时,细节列表控件将被刷新以显示作为所选主人的 child 的细节。

我熟悉通过将模型绑定(bind)到 View
sap.ui.getCore().setModel(oModel) 
this.getView().setModel(oModel)

但是根据我迄今为止的学习,这会将 View 中的所有控件绑定(bind)到一个模型。

我认为可能值得追求的选择是:
  • 将单独的模型绑定(bind)到每个主控件和细节控件,并编写自定义代码以在选择主控件时切换出细节模型。但是如何进行这样的绑定(bind);
  • 使用单个模型,但以某种方式设置细节控件以识别“当前选定的”主控。
  • 在细节控制上使用某种过滤器。

  • 进一步解释 2,如果说我正在使用表格进行详细显示,我可能在表格 def
       <Table
                id="detailList"
                items="{
                    path: '/'
                }",
                ...
         >
    

    所以我希望将路径修改为类似
    path: '/master[n]/detail/'
    

    其中 n 代表选定的主实例。

    要么可能,要么有其他选择,要么我应该放弃。

    编辑:我通过 Michael Herzog here 找到了这个潜在的基于过滤器的解决方案.他的描述是:

    i'll give you an example, how you can implement a matser-detail relationship in SAPUI5.

    Use case: When the user is clicking on a client in the first table, all related orders should be displayed in the second table. Orders from other clients should be hidden.

    So, in our view, we have two tables:

    1. Table: Clients

    2. Table: Orders

    After you created both tables and set up the databinding, implement this eventhandler on the first table:


    oTableClients.attachRowSelectionChange( function(oEvent){
    
        // first, we fetch the binding context of the selected row
         var selectedRowContext = oEvent.getParameter("rowContext");
         // get the ID of the customer via rowContext. The model-object represents the data of the first table
         var selectedClientId = oModel,getProperty("id", selectedRowContext);
         // get binding of second table
         var ordersBinding = oTableOrders.getBinding();
         //create new filter to show the relevant data for the selected customer
         var oFilter = new sap.ui.model.Filter("clientId", sap.ui.model.FilterOperation.EQ, selectedClientId);
         // apply filter to binding
         ordersBinding.filter([oFilter]);
    });
    

    我可以看到这种方法对我来说是可行的——这种模式有什么根本缺陷吗?

    最佳答案

    一般来说,你的 View 可以有你喜欢的模型。唯一的限制是只能有一个无名模型,即所有其他模型都需要命名。以下代码显示了差异:

    this.getView().setModel(new JSONModel(data));
    this.getView().setModel(new JSONModel(data), name));
    

    要绑定(bind)命名模型,您必须在绑定(bind)指令中提供其名称,否则运行时将使用无名模型。以下示例显示了差异(请注意,您可以使用短绑定(bind)语法,除非您想提供其他参数,即您可以省略 path 属性:
    <Table items="{/path}">
    <Table items="{name>/path}">
    

    在您的示例中,我建议使用一个模型并使用绑定(bind)上下文来控制详细信息表中显示的数据。

    明细表的绑定(bind)应该是相对的,如下所示:
    <Table id="detailList" items="{detail}">
    

    处理主列表选择的处理程序如下:
    onMasterItemSelect : function(event) {
        // get the binding context of the currently selected master item, e.g. /master/0
        var masterBindingContext = event.getParameter("listItem").getBindingContext();
    
        // bind detail table to the selected master item using bindElement
        this.byId("details").bindElement(masterBindingContext.getPath());
    }
    

    关于sapui5 - 是否可以在一个 View 中使用 2 个模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41753783/

    相关文章:

    javascript - OpenUI5 控件不可见

    performance - 为什么 SAPUI5 多次加载类似的片段?

    javascript - 如何检索点击的表元素的详细信息?

    javascript - 如何限制 sap.m.multicombobox 中建议下拉菜单的大小?

    css - UI5响应式布局控件(创建响应式CustomListItem)

    javascript - 如何在 SAPUI5 中将占位符文本加粗

    odata - sapui5表只显示相同的记录

    sapui5 - FilterOperator 在使用引号时出现错误,相同的代码在系统/时间上有不同的行为

    javascript - SAP UI5 中未填充下拉列表

    javascript - IndexedDB:使用方法 add 执行函数多次 - 没有新的数据库条目