How to use the ember-metal/computed.computed function in ember-metal

replace(subControllers, idx, removedCnt, new Array(addedCnt));
    }

    // The shadow array of subcontrollers must be updated before we trigger
    // observers, otherwise observers will get the wrong subcontainer when
    // calling `objectAt`
    this._super(idx, removedCnt, addedCnt);
  },

  init() {
    this._super(...arguments);
    this._subControllers = [];
  },

  model: computed({
    get(key) {
      return Ember.A();
    },
    set(key, value) {
      Ember.assert(
        'ArrayController expects `model` to implement the Ember.Array mixin. ' +
        'This can often be fixed by wrapping your model with `Ember.A()`.',
        EmberArray.detect(value) || !value
      );

      return value;
    }
  }),

  /**
   * Flag to mark as being "virtual". Used to keep this instance

@namespace Ember
  @extends Ember.View
  @uses Ember.ViewTargetActionSupport
  @public
*/
var Component = View.extend(TargetActionSupport, {
  isComponent: true,
  /*
    This is set so that the proto inspection in appendTemplatedView does not
    think that it should set the components `context` to that of the parent view.
  */
  controller: null,
  context: null,

  instrumentName: 'component',
  instrumentDisplay: computed(function() {
    if (this._debugContainerKey) {
      return '{{' + this._debugContainerKey.split(':')[1] + '}}';
    }
  }),

  init() {
    this._super(...arguments);
    set(this, 'controller', this);
    set(this, 'context', this);

    if (!this.layout && this.layoutName && getOwner(this)) {
      let layoutName = get(this, 'layoutName');

      this.layout = this.templateForName(layoutName);
    }

Say Hello to {{person.name}}

Components must have a - in their name to avoid conflicts with built-in controls that wrap HTML elements. This is consistent with the same requirement in web components.

@class Component @namespace Ember @extends Ember.View */ var Component = View.extend(TargetActionSupport, ComponentTemplateDeprecation, { instrumentName: 'component', instrumentDisplay: computed(function() { if (this._debugContainerKey) { return '{{' + this._debugContainerKey.split(':')[1] + '}}'; } }),

init: function() { this._super(); set(this, 'origContext', get(this, 'context')); set(this, 'context', this); set(this, 'controller', this); },

defaultLayout: function(context, options){ Ember.Handlebars.helpers['yield'].call(context, options); },

let routing = get(this, '_routing');
    let queryParams = get(this, 'queryParams.values');
    return routing.generateURL(qualifiedRouteName, models, queryParams);
  }),

  loading: computed('_modelsAreLoaded', 'qualifiedRouteName', function computeLinkToComponentLoading() {
    let qualifiedRouteName = get(this, 'qualifiedRouteName');
    let modelsAreLoaded = get(this, '_modelsAreLoaded');

    if (!modelsAreLoaded || qualifiedRouteName == null) {
      return get(this, 'loadingClass');
    }
  }),

  _modelsAreLoaded: computed('models', function computeLinkToComponentModelsAreLoaded() {
    let models = get(this, 'models');
    for (let i = 0, l = models.length; i < l; i++) {
      if (models[i] == null) { return false; }
    }

    return true;
  }),

  _getModels(params) {
    let modelCount = params.length - 1;
    let models = new Array(modelCount);

    for (let i = 0; i < modelCount; i++) {
      let value = params[i + 1];

      while (ControllerMixin.detect(value)) {

computed.deprecatingAlias = function(dependentKey) {
  return computed(dependentKey, function(key, value) {
    Ember.deprecate('Usage of `' + key + '` is deprecated, use `' + dependentKey + '` instead.');

    if (arguments.length > 1) {
      set(this, dependentKey, value);
      return value;
    } else {
      return get(this, dependentKey);
    }
  });
};

return resolvedParams;
  }),

  queryParamsObject: null,

  /**
    Sets the element's `href` attribute to the url for
    the `LinkView`'s targeted route.

    If the `LinkView`'s `tagName` is changed to a value other
    than `a`, this property will be ignored.

    @property href
  **/
  href: computed('loadedParams', function computeLinkViewHref() {
    if (get(this, 'tagName') !== 'a') { return; }

    var router = get(this, 'router');
    var loadedParams = get(this, 'loadedParams');

    if (!loadedParams) {
      return get(this, 'loadingHref');
    }

    var visibleQueryParams = {};
    merge(visibleQueryParams, loadedParams.queryParams);
    router._prepareQueryParams(loadedParams.targetRouteName, loadedParams.models, visibleQueryParams);

    var args = routeArgs(loadedParams.targetRouteName, loadedParams.models, visibleQueryParams);
    var result = router.generate.apply(router, args);
    return result;

queryParams: null,

  qualifiedRouteName: computed('targetRouteName', '_routing.currentState', function computeLinkToComponentQualifiedRouteName() {
    let params = get(this, 'params').slice();
    let lastParam = params[params.length - 1];
    if (lastParam && lastParam.isQueryParams) {
      params.pop();
    }
    let onlyQueryParamsSupplied = (this[HAS_BLOCK] ? params.length === 0 : params.length === 1);
    if (onlyQueryParamsSupplied) {
      return get(this, '_routing.currentRouteName');
    }
    return get(this, 'targetRouteName');
  }),

  resolvedQueryParams: computed('queryParams', function computeLinkToComponentResolvedQueryParams() {
    let resolvedQueryParams = {};
    let queryParams = get(this, 'queryParams');

    if (!queryParams) { return resolvedQueryParams; }

    let values = queryParams.values;
    for (let key in values) {
      if (!values.hasOwnProperty(key)) { continue; }
      resolvedQueryParams[key] = values[key];
    }

    return resolvedQueryParams;
  }),

  /**
    Sets the element's `href` attribute to the url for

var args = [idx, removedCount].concat(addedViews);
      if (addedViews.length && !this._childViews.length) { this._childViews = this._childViews.slice(); }
      this._childViews.splice.apply(this._childViews, args);
    }

    this.arrayContentDidChange(idx, removedCount, addedCount);
    this.childViewsDidChange(this._childViews, idx, removedCount, addedCount);

    return this;
  },

  objectAt: function(idx) {
    return this._childViews[idx];
  },

  length: computed(function () {
    return this._childViews.length;
  }).volatile(),

  /**
    Instructs each child view to render to the passed render buffer.

    @private
    @method render
    @param {Ember.RenderBuffer} buffer the buffer to render to
  */
  render: function(buffer) {
  },

  instrumentName: 'container',

  /**

/**
    Accessed as a classname binding to apply the `LinkComponent`'s `activeClass`
    CSS `class` to the element when the link is active.

    A `LinkComponent` is considered active when its `currentWhen` property is `true`
    or the application's current route is the route the `LinkComponent` would trigger
    transitions into.

    The `currentWhen` property can match against multiple routes by separating
    route names using the ` ` (space) character.

    @property active
    @private
  */
  active: computed('attrs.params', '_routing.currentState', function computeLinkToComponentActive() {
    let currentState = get(this, '_routing.currentState');
    if (!currentState) { return false; }

    return this._computeActive(currentState);
  }),

  willBeActive: computed('_routing.targetState', function computeLinkToComponentWillBeActive() {
    let routing = get(this, '_routing');
    let targetState = get(routing, 'targetState');
    if (get(routing, 'currentState') === targetState) { return; }

    return !!this._computeActive(targetState);
  }),

  transitioningIn: computed('active', 'willBeActive', function computeLinkToComponentTransitioningIn() {
    let willBeActive = get(this, 'willBeActive');

this time, clicking the link will perform no transition and
    emit a warning that the link is still in a loading state.

    @property loading
  **/
  loading: computed('loadedParams', function computeLinkViewLoading() {
    if (!get(this, 'loadedParams')) { return get(this, 'loadingClass'); }
  }),

  /**
    Returns the application's main router from the container.

    @private
    @property router
  **/
  router: computed(function() {
    var controller = get(this, 'controller');
    if (controller && controller.container) {
      return controller.container.lookup('router:main');
    }
  }),

  /**
    Event handler that invokes the link, activating the associated route.

    @private
    @method _invoke
    @param {Event} event
  */
  _invoke: function(event) {
    if (!isSimpleClick(event)) { return true; }