Question

我有一个表，我的控制器中的javascript间隔函数定期更新数据：

var model = this.getview().getModel();  
var updateModel = setInterval(function(){
  model.loadData('path/to/my/data.json');  
}, 30000)

这基本上是公共监视器上的静态显示，显示数据摘要。

我希望能够突出显示属性何时发生变化，因此我一直在尝试在控件更改时向控件添加类。然后，该类将以某种方式使用CSS突出显示。

<Table items="{items}">  
  <columns>  
    <Column/>  
    <Column/>  
  </columns>  
  <items>  
    <ColumnListItem>  
      <cells>  
        <Text   
          text="{name}" />  
        <ObjectStatus  
          text="{value}"  
          state="{  
            path: 'value',  
            formatter: '.formatter.redOrGreen'  
          }"/>  
      </cells>  
    </ColumnListItem>  
  </items>  
</Table>

因此模型每30秒更新一次。如果{value}字段发生更改，我想向ObjectStatus控件添加一个类。

目前我只是使用JSON模型进行本地开发，看看是否可行，但在生产中它将是一个oData服务。

Answer 1

感谢您的回答，我设法解决了这个问题，但我的方法并没有完全涵盖在这里的答案。我就这样做了：

自从我发布问题以来，对此的要求略有变化。我需要指出某些内容是否已经改变，但是如果值已经上升或下降。我还需要指出某些事物是否高于或低于某个值。如果还有其他未来的要求，我也想制定一个可以轻松调整的解决方案。当后端服务启动并运行时，还需要轻松调整oData。

首先（并且关键是这个）是设置一个重复的模型，所以这将进入我的component.js文件。我只是在这里复制模型，以便值的旧值和新值不变，格式化程序函数适用于第一页加载：

var oModel = new JSONModel('/path/to/data.js');
this.setModel(oModel, 'model');
this.setModel(oModel, 'oldModel');

在我的视图的控制器中，我然后获取旧数据的副本，该数据进入我已附加到视图的旧模型，然后更新新模型。我在后渲染钩子中执行此操作以优化初始页面加载。

onAfterRendering: function(){
  var thisView = this.getView();
  var updateModel = function(){
    var oldData = thisView.getModel('model').getData();
    var oldModel = new JSONModel(oldWharehousesData);
    thisView.setModel(ollModel, 'oldModel');

    //update model
    var newModel = thisView.getModel('model');
    model.loadData('/path/to/data.js');

  };
  window.refershInterval = setInterval(updateModel, 30000);
}

然后，我可以在XML视图中将新旧值输入到格式化程序，并输出一些自定义数据属性：

<core:CustomData
    key="alert-status"
    value="{
      parts: [
        'model>Path/To/My/Property',
        'oldModel>Path/To/My/Property'
        ],
      formatter: '.formatter.alertStatus'
      }"
    writeToDom="true"/>
</customData>

我的formatter.js：

alertStatus: function(newValue, oldValue){
  var alertNum = 25;
  if(newValue < alertNum && oldValue >= alertNum) {
    return 'red';
  } else if (newValue >= alertNum && oldValue < alertNum) {
    return 'green';
  } else {
    return 'none';
  }
}

然后我可以拥有尽可能多的自定义数据属性，通过他们自己的格式化程序函数运行它们，这可以根据我的心脏内容进行设置，例如：

compareValues: function(newValue, oldValue) {
  if (newValue > oldValue) {
    return 'higher';
  } else if (newValue < oldValue){
    return 'lower';
  } else {
    return 'false';
  }
}

Answer 2

我已经构建了example on JSBin。

首先，您必须获取收到的数据。你可以使用 Model.attachRequestCompleted事件：

    this.model = new sap.ui.model.json.JSONModel();
    this.model.attachRequestCompleted(this.onDataLoaded, this);

在事件处理程序onDataLoaded中，您可以检索JavaScript对象并将其与保存的副本进行比较。您必须编写指示数组项本身更改的标志。（将其存储在Marc在其评论中建议的单独模型中将无效，因为在您的聚合绑定中，您只有一个上下文到您的数组项。）

最后，您必须将newData对象保存为this.oldData以便下次请求。

  onDataLoaded:function(){
    var newData = this.model.getProperty("/");
    if (this.oldData){
      //diff. You should customize this to your needs.
      for(var i = 0, length = Math.min(newData.items.length, this.oldData.items.length); i< length; i++){
        newData.items[i].valueChanged = newData.items[i].value !== this.oldData.items[i].value;
        newData.items[i].nameChanged = newData.items[i].name !== this.oldData.items[i].name;
      }
    }
    this.oldData = newData;
    this.getView().getModel().setProperty("/",newData);
  },

然后，您可以将ObjectState状态属性绑定到标志：

<ObjectStatus  
      text="{value}"
      state="{= ${valueChanged} ? 'Warning':'None' }"/>

如果您想要更改整行的背景颜色或类似内容，您可以应用Bernard's回答并使用customData attribute中的标记。

Answer 3

您可以使用<customData>标记这允许将自定义属性插入到XML到HTML转换过程生成的HTML中

在下面的示例中，例如我添加了一个自定义属性（我自己的） - 此代码在相关的HTML元素（data-colour标记）中生成以下属性<SPAN> - 使用自定义属性检查相关元素比方说，Chrome。

<customData>
   <core:CustomData writeToDom="true" key="colour" value="{vproducts>ListCostColour}" />
</customData>

然后，您可以在自己的样式表中为此属性创建样式，如下所示（并在manifest.json中引用它）

    [data-colour="red"] {
        background-color: #ffd1cc;
    }
    [data-colour="orange"] {
        background-color: rgba(255, 243, 184, 0.64);
    }
    [data-colour="green"] {`enter code here`
         background-color: rgba(204, 255, 198, 0.97);
     }

突出显示模型加载时更改的属性

3 个答案: