时间戳

首页 > 解决方案 > 绑定模型更改时 VizFrame 不更新

sapui5 - 绑定模型更改时 VizFrame 不更新

问题描述

在我看来，我有一个绑定到双向 JSON 模型的属性sap.viz.ui5.controls.VizFrame。data此外，我在同一视图中有 aButton和 a元素。Text该Text元素显示模型的值，它与 绑定VizFrame，并且Button有一个press事件处理程序，它增加模型的一个属性的值。

所以，当我按下按钮时，会Text自动更新，不像VizFrame. 你对如何解决这个问题有什么建议吗？我看到了这种vizUpdate方法，但它看起来非常复杂，可能是矫枉过正。但是，更改整个模型也会更改VizFrame.

代码示例

主视图.xml

<mvc:View controllerName="demo.chart.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <VBox>
                            <viz:VizFrame id="vizFrame" uiConfig="{applicationSet:'fiori'}" vizType='donut'>
                                <viz:dataset>
                                    <viz.data:FlattenedDataset data="{data>/}">
                                        <viz.data:dimensions>
                                            <viz.data:DimensionDefinition name="Type" value="{manipulatedData>type}"/>
                                        </viz.data:dimensions>
                                        <viz.data:measures>
                                            <viz.data:MeasureDefinition name="Amount" value="{manipulatedData>amount}"/>
                                        </viz.data:measures>
                                    </viz.data:FlattenedDataset>
                                </viz:dataset>
                                <viz:feeds>
                                    <viz.feeds:FeedItem uid="color" type="Dimension" values="Type"/>
                                    <viz.feeds:FeedItem uid="size" type="Measure" values="Amount"/>
                                </viz:feeds>
                            </viz:VizFrame>
                            <Button text="+1 Foo" press="onButtonPress"/>
                            <Text text="Foo: {data>/0/amount} | Bar: {data>/1/amount}"/>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

主控制器.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("demo.chart.controller.Main", {
        onInit: function () {
            this.mData = new JSONModel([{
                type: "foo",
                amount: 23
            }, {
                type: "bar",
                amount: 20
            }]).setDefaultBindingMode("TwoWay");
            this.getView().setModel(this.mData, "data");
        },

        onButtonPress() {
            this.mData.setProperty("/0/amount", this.mData.getProperty("/0/amount") + 1);
        }
    });
});

标签： sapui5

解决方案

我想我想通了。更改模型后，您必须将数据重新绑定到数据集聚合：

工作示例

主控制器.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("demo.chart.controller.Main", {
        onInit: function () {
            this.mData = new JSONModel([{
                type: "foo",
                amount: 23
            }, {
                type: "bar",
                amount: 20
            }]).setDefaultBindingMode("TwoWay");
            this.getView().setModel(this.mData, "data");
        },

        onButtonPress() {
            this.mData.setProperty("/0/amount", this.mData.getProperty("/0/amount") + 1);
            this.byId("vizFrame").getDataset().bindData({
                path: "data>/"
            });
        }
    });
});

推荐阅读