模版语法替换

{{}}替换为[[]],避免和hbs语法冲突；

var vm = new Vue({
  el: '#applications',
  delimiters: ['[[',']]'],
  data(){
    return {}
  }
});

事件处理

Vue.use(window['vue-dash-event'])
var vm = new Vue({});

If you not use DOM templates, You don't need this plugin.

<script src="https://cdn.jsdelivr.net/npm/vue-dash-event@1.0.1/dist/index.min.js"></script>
<script>
Vue.use(window['vue-dash-event'])
</script>

Unlike components and props, event names don’t provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:

this.$emit('myEvent')

Listening to the kebab-cased version will have no effect:

<my-component v-on:my-event="doSomething"></my-component>

参考地址 (opens new window)

ember页面传值

web\app\views\main\service\item.js view中定义值；

  hasMetricTab: function() {
    let serviceName = this.get('controller.content.serviceName');
    let graphs = require('data/service_graph_config')[serviceName.toLowerCase()];
    return graphs || App.StackService.find(serviceName).get('isServiceWithWidgets');
  }.property('controller.content.serviceName'),
    
   hasAppTab: function() {
    let serviceName = this.get('controller.content.serviceName');
    return serviceName === 'YARN'
  }.property('controller.content.serviceName'),

web\app\templates\main\service\item.hbs 页面使用view中的值，传递参数；

{{view App.MainServiceInfoMenuView
    configTabBinding="view.hasConfigTab"
    heatmapTabBinding="view.hasHeatmapTab"
    metricTabBinding="view.hasMetricTab"}}

web\app\views\main\service\info\menu.js view接送参数；

var App = require('app');

App.MainServiceInfoMenuView = Em.CollectionView.extend({
  tagName: 'ul',
  classNames: ["nav", "nav-tabs", "background-text"],
  content: function () {
    var menuItems = [
      {
        label: Em.I18n.t('services.service.info.menu.summary'),
        id: 'summary-service-tab',
        routing: 'summary',
        active: "active"
      },
    ];
    menuItems.push({
      label: Em.I18n.t('services.service.info.menu.instances'),
      id: 'instances-service-tab',
      routing: 'instances'
    })
    if (this.get('appTab')) {
      menuItems.push({
        label: Em.I18n.t('services.service.info.menu.applications'),
        id: 'applications-service-tab',
        routing: 'applications'
      })
    }
    return menuItems;
  }.property(),
}

直接配合使用

开发新功能模块；

引入模块

ctrl

controllers.js

require('controllers/main/service/info/instances');
require('controllers/main/service/info/applications');

view

view.js

require('views/main/service/info/instances_view');
require('views/main/service/info/applications_view');

路由

routes/main.js

    applications: Em.Route.extend({
        route: '/applications',
        breadcrumbs: {
          label: Em.I18n.t('services.service.info.menu.applications')
        },
        connectOutlets: function (router, context) {
          var item = router.get('mainServiceItemController.content');
         router.get('mainServiceItemController').connectOutlet('mainServiceInfoApplications', item);
        }
      }),

菜单

web\app\views\main\service\info\menu.js

App.MainServiceInfoMenuView = Em.CollectionView.extend({
  tagName: 'ul',
  classNames: ["nav", "nav-tabs", "background-text"],
  content: function () {
    var menuItems = [
      {
        label: Em.I18n.t('services.service.info.menu.summary'),
        id: 'summary-service-tab',
        routing: 'summary',
        active: "active"
      },
    ];
    if (this.get('heatmapTab')) {
      menuItems.push({
        label: Em.I18n.t('services.service.info.menu.heatmaps'),
        id: 'heatmap-service-tab',
        routing: 'heatmaps'
      });
    }
    menuItems.push({
      label: Em.I18n.t('services.service.info.menu.instances'),
      id: 'instances-service-tab',
      routing: 'instances'
    })
    menuItems.push({
      label: Em.I18n.t('services.service.info.menu.applications'),
      id: 'applications-service-tab',
      routing: 'applications'
    })
    return menuItems;
  }.property(),

业务处理配合vue相关

web\app\controllers\main\service\info\applications.js

var App = require('app');
App.MainServiceInfoApplicationsController = Em.Controller.extend({
  name: 'mainServiceInfoApplicationsController',
});

web\app\views\main\service\info\applications_view.js

var App = require('app');

App.MainServiceInfoApplicationsView = Em.View.extend({
  templateName: require('templates/main/service/info/applications'),

  didInsertElement: function() {
  },

  willDestroyElement: function() {
  }
});

时间格式

方法封装：

wdp-web/web/app/utils/helper.js

App.dateTimeWithTimeZone = function (x) {
  var timezone = App.router.get('userSettingsController.userSettings.timezone');
  if (timezone) {
    var tz = Em.getWithDefault(timezone, 'zones.0.value', '');
    return moment(moment.tz(x ? new Date(x) : new Date(), tz).toArray()).toDate().getTime();
  }
  return x || new Date().getTime();
};

App.formatDateTimeWithTimeZone = function (timeStamp, format) {
  var timezone = App.router.get('userSettingsController.userSettings.timezone'),
    time;
  if (timezone) {
    var tz = Em.getWithDefault(timezone, 'zones.0.value', '');
    time = moment.tz(timeStamp, tz);
  } else {
    time = moment(timeStamp);
  }
  return moment(time).format(format);
};

App.getTimeStampFromLocalTime = function (time) {
  var timezone = App.router.get('userSettingsController.userSettings.timezone'),
    offsetString = '',
    date = moment(time).format('YYYY-MM-DD HH:mm:ss');
  if (timezone) {
    var offset = timezone.utcOffset;
    offsetString = moment().utcOffset(offset).format('Z');
  }
  return moment(date + offsetString).toDate().getTime();
};

列表示范

分页处理

iframe内嵌使用