将 HTML 片段与声明性 HTML 视图一起使用

问题描述

我正在尝试将大型 HTML 视图分解为更小、更易于管理的块.

是否可以使用片段来做到这一点?

例如，我有一个包含以下内容的片段文件 (view.configurator.Summary.fragment.html):

在我的父文件中，我尝试按如下方式包含片段:

 
<div data-sap-ui-type="sap.ui.core.Fragment";数据片段名称=view.configurator.Summary"数据类型=HTML"></div>

但是我在控制台中收到以下错误:

请提供片段名称

有什么想法吗?

似乎是一个错误，但您可以通过将片段包装在自定义控件中来解决

 sap.ui.core.Control.extend(sap.mic.controls.Fragment", {元数据:{特性: {名称":字符串"；}},初始化:函数(){},渲染器:函数(渲染管理器，控制){var fragmentName = control.getProperty("name"),片段 = sap.ui.htmlfragment(fragmentName);renderManager.renderControl(fragment);}});

并像这样使用:

<div data-sap-ui-type="sap.mic.controls.Fragment";数据名称=view.configurator.Summary"></div>

解决方案

In XML-View

包括这个视图:

在 HTML 视图中

您可以包含这样的视图:

<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" data-view-name="your.namespace.ViewName" data-async="true"></div>

I am trying to decompose a large HTML view down into smaller, more manageable chunks.

Is it possible to use fragments to do this?

For example, I have a fragment file (view.configurator.Summary.fragment.html) containing the following:

<div data-sap-ui-type="sap.m.Button" data-text="Hello"></div>

In my parent file, I try to include the fragment as follows:

            <div data-sap-ui-type="sap.m.VBox" class="summary-panel-content">

                <div data-sap-ui-type="sap.ui.core.Fragment"
                     data-fragment-name="view.configurator.Summary"
                     data-type="HTML"></div>

            </div>

However I get the following Error in the console:

Any ideas?

Seems like its a bug, but you can workaround by wrapping the fragment in a custom control

 sap.ui.core.Control.extend("sap.mic.controls.Fragment", {

    metadata: {
        properties: {
            "name": "string"
        }
    },

    init: function () {
    },

    renderer: function (renderManager, control) {
        var fragmentName = control.getProperty("name"),
            fragment = sap.ui.htmlfragment(fragmentName);

        renderManager.renderControl(fragment);
    }
});

And used like so:

<div data-sap-ui-type="sap.m.Page" data-enable-scrolling="false">

    <div data-sap-ui-type="sap.mic.controls.Fragment"
         data-name="view.configurator.Summary"></div>

</div>

解决方案

In XML-View

Include the view with this:

<mvc:XMLView viewName="your.namespace.ViewName" async="true" />

In HTML-View

You can include Views like this:

<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" data-view-name="your.namespace.ViewName" data-async="true"></div>

这篇关于将 HTML 片段与声明性 HTML 视图一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！