如何在 DevExtreme 菜单上刷新数据源

How to refresh data source on DevExtreme menu

我正在使用 angular-translate 作为 i18n。有点遗憾,$translate 服务异步加载字符串。

我已经复制了相关的控制器代码。加载翻译后用新项目数组替换当前数据源项目的最佳方法是什么? (或在这种情况下用户签名后)。代码似乎有点笨拙。

下面是我的尝试。

var items = [
  {
    text: 'This option remains',
    uiState: 'signin',
    icon: 'user'
  }];

$scope.accountMenuDS = new DevExpress.data.DataSource({
  store: {
    type: "array",
    key: "text",
    data: items
  }
});

$translate(['users.signin']).then(function (trans) {
  if (!user) {

    var newItems = [
      {
        text: 'hello',
        uiState: 'signin',
        icon: 'key'
      }
    ];

    Array.prototype.splice.apply(items, [0, newItems.length].concat(newItems)); // is there a better way than this?

    $scope.accountMenuDS.reload();

  } else {
    // handle signed in case later
  }
});

在您的情况下,您可以使用 bindingOptions 字段来提供 two-way 绑定:

<div ng-controller="myCtrl">
    <div dx-menu="menuOptions"></div>
    <div dx-button="buttonOptions"></div>
</div>

控制器代码:

myApp.controller("myCtrl", function($scope) {
    $scope.menuData = [/*...*/];

    $scope.menuOptions = {
        bindingOptions: {
            dataSource: "menuData"
        }
    };

    $scope.buttonOptions = {
        text: "Update data",
        onClick: function() {
            $scope.menuData.push({
                text: "Item 3"
            });
        }
    };
});

也请参阅此 plunker demo