TypeScript DOM.templateAwareRoot方法代码示例

  _process(results, parent: CompileElement, current: CompileElement,
           compilationCtxtDescription: string = '') {
    var additionalChildren = this._control.internalProcess(results, 0, parent, current);

    if (current.compileChildren) {
      var node = DOM.firstChild(DOM.templateAwareRoot(current.element));
      while (isPresent(node)) {
        // compiliation can potentially move the node, so we need to store the
        // next sibling before recursing.
        var nextNode = DOM.nextSibling(node);
        if (DOM.isElementNode(node)) {
          var childCompileElement = new CompileElement(node, compilationCtxtDescription);
          childCompileElement.inheritedProtoView = current.inheritedProtoView;
          childCompileElement.inheritedElementBinder = current.inheritedElementBinder;
          childCompileElement.distanceToInheritedBinder = current.distanceToInheritedBinder + 1;
          this._process(results, current, childCompileElement);
        }
        node = nextNode;
      }
    }

    if (isPresent(additionalChildren)) {
      for (var i = 0; i < additionalChildren.length; i++) {
        this._process(results, current, additionalChildren[i]);
      }
    }
  }

 process(parent: CompileElement, current: CompileElement, control: CompileControl) {
   if (!current.compileChildren) {
     return;
   }
   var element = current.element;
   var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
   for (var i = 0; i < childNodes.length; i++) {
     var node = childNodes[i];
     if (DOM.isTextNode(node)) {
       var text = DOM.nodeValue(node);
       var expr = this._parser.parseInterpolation(text, current.elementDescription);
       if (isPresent(expr)) {
         DOM.setText(node, ' ');
         current.bindElement().bindText(node, expr);
       }
     }
   }
 }

export function stringifyElement(el): string {
  var result = '';
  if (DOM.isElementNode(el)) {
    var tagName = StringWrapper.toLowerCase(DOM.tagName(el));

    // Opening tag
    result += `<${tagName}`;

    // Attributes in an ordered way
    var attributeMap = DOM.attributeMap(el);
    var keys = [];
    MapWrapper.forEach(attributeMap, (v, k) => { keys.push(k); });
    ListWrapper.sort(keys);
    for (let i = 0; i < keys.length; i++) {
      var key = keys[i];
      var attValue = MapWrapper.get(attributeMap, key);
      if (!isString(attValue)) {
        result += ` ${key}`;
      } else {
        result += ` ${key}="${attValue}"`;
      }
    }
    result += '>';

    // Children
    var children = DOM.childNodes(DOM.templateAwareRoot(el));
    for (let j = 0; j < children.length; j++) {
      result += stringifyElement(children[j]);
    }

    // Closing tag
    if (!ListWrapper.contains(_singleTagWhitelist, tagName)) {
      result += `</${tagName}>`;
    }
  } else {
    result += DOM.getText(el);
  }

  return result;
}

 _instantiate(hostElementInjector, eventManager) {
   var rootElementClone = this.instantiateInPlace ? this.element : DOM.importIntoDoc(this.element);
   var elementsWithBindingsDynamic;
   if (this.isTemplateElement) {
     elementsWithBindingsDynamic = DOM.querySelectorAll(DOM.content(rootElementClone), NG_BINDING_CLASS_SELECTOR);
   } else {
     elementsWithBindingsDynamic = DOM.getElementsByClassName(rootElementClone, NG_BINDING_CLASS);
   }
   var elementsWithBindings = ListWrapper.createFixedSize(elementsWithBindingsDynamic.length);
   for (var binderIdx = 0; binderIdx < elementsWithBindingsDynamic.length; ++binderIdx) {
     elementsWithBindings[binderIdx] = elementsWithBindingsDynamic[binderIdx];
   }
   var viewNodes;
   if (this.isTemplateElement) {
     var childNode = DOM.firstChild(DOM.content(rootElementClone));
     viewNodes = [];
     while (childNode != null) {
       ListWrapper.push(viewNodes, childNode);
       childNode = DOM.nextSibling(childNode);
     }
   } else {
     viewNodes = [rootElementClone];
   }
   var view = new View(this, viewNodes, this.protoLocals);
   var changeDetector = this.protoChangeDetector.instantiate(view, this.bindingRecords, this._getVariableBindings(), this._getDirectiveMementos());
   var binders = this.elementBinders;
   var elementInjectors = ListWrapper.createFixedSize(binders.length);
   var eventHandlers = ListWrapper.createFixedSize(binders.length);
   var rootElementInjectors = [];
   var textNodes = [];
   var elementsWithPropertyBindings = [];
   var preBuiltObjects = ListWrapper.createFixedSize(binders.length);
   var viewContainers = ListWrapper.createFixedSize(binders.length);
   var contentTags = ListWrapper.createFixedSize(binders.length);
   var componentChildViews = [];
   var lightDoms = ListWrapper.createFixedSize(binders.length);
   for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
     var binder = binders[binderIdx];
     var element;
     if (binderIdx === 0 && this.rootBindingOffset === 1) {
       element = rootElementClone;
     } else {
       element = elementsWithBindings[binderIdx - this.rootBindingOffset];
     }
     var elementInjector = null;
     var protoElementInjector = binder.protoElementInjector;
     if (isPresent(protoElementInjector)) {
       if (isPresent(protoElementInjector.parent)) {
         var parentElementInjector = elementInjectors[protoElementInjector.parent.index];
         elementInjector = protoElementInjector.instantiate(parentElementInjector, null);
       } else {
         elementInjector = protoElementInjector.instantiate(null, hostElementInjector);
         ListWrapper.push(rootElementInjectors, elementInjector);
       }
     }
     elementInjectors[binderIdx] = elementInjector;
     if (binder.hasElementPropertyBindings) {
       ListWrapper.push(elementsWithPropertyBindings, element);
     }
     var textNodeIndices = binder.textNodeIndices;
     if (isPresent(textNodeIndices)) {
       var childNode = DOM.firstChild(DOM.templateAwareRoot(element));
       for (var j = 0,
           k = 0; j < textNodeIndices.length; j++) {
         for (var index = textNodeIndices[j]; k < index; k++) {
           childNode = DOM.nextSibling(childNode);
         }
         ListWrapper.push(textNodes, childNode);
       }
     }
     var lightDom = null;
     var bindingPropagationConfig = null;
     if (isPresent(binder.nestedProtoView) && isPresent(binder.componentDirective)) {
       var strategy = this.shadowDomStrategy;
       var childView = binder.nestedProtoView.instantiate(elementInjector, eventManager);
       changeDetector.addChild(childView.changeDetector);
       lightDom = strategy.constructLightDom(view, childView, element);
       strategy.attachTemplate(element, childView);
       bindingPropagationConfig = new BindingPropagationConfig(childView.changeDetector);
       ListWrapper.push(componentChildViews, childView);
     }
     lightDoms[binderIdx] = lightDom;
     var destLightDom = null;
     if (isPresent(binder.parent) && binder.distanceToParent === 1) {
       destLightDom = lightDoms[binder.parent.index];
     }
     var viewContainer = null;
     if (isPresent(binder.viewportDirective)) {
       viewContainer = new ViewContainer(view, element, binder.nestedProtoView, elementInjector, eventManager, destLightDom);
     }
     viewContainers[binderIdx] = viewContainer;
     var contentTag = null;
     if (isPresent(binder.contentTagSelector)) {
       contentTag = new Content(destLightDom, element, binder.contentTagSelector);
     }
     contentTags[binderIdx] = contentTag;
     if (isPresent(elementInjector)) {
       preBuiltObjects[binderIdx] = new PreBuiltObjects(view, new NgElement(element), viewContainer, bindingPropagationConfig);
     }
     if (isPresent(binder.events)) {
//.........这里部分代码省略.........

 function assertElementTextBinding(elementBinderBuilder: ElementBinderBuilder, nodeIndex: number,
                                   expression: string) {
   var node = DOM.childNodes(DOM.templateAwareRoot(elementBinderBuilder.element))[nodeIndex];
   expect(elementBinderBuilder.textBindings.get(node).source).toEqual(expression);
 }

 function assertTextBinding(elementBinder, bindingIndex, nodeIndex, expression) {
   expect(elementBinder.textBindings[bindingIndex].source).toEqual(expression);
   expect(elementBinder.textBindingNodes[bindingIndex])
       .toEqual(DOM.childNodes(DOM.templateAwareRoot(elementBinder.element))[nodeIndex]);
 }

 _createView(protoView) {
   var rootElementClone = protoView.isRootView ? protoView.element : DOM.importIntoDoc(protoView.element);
   var elementsWithBindingsDynamic;
   if (protoView.isTemplateElement) {
     elementsWithBindingsDynamic = DOM.querySelectorAll(DOM.content(rootElementClone), NG_BINDING_CLASS_SELECTOR);
   } else {
     elementsWithBindingsDynamic = DOM.getElementsByClassName(rootElementClone, NG_BINDING_CLASS);
   }
   var elementsWithBindings = ListWrapper.createFixedSize(elementsWithBindingsDynamic.length);
   for (var binderIdx = 0; binderIdx < elementsWithBindingsDynamic.length; ++binderIdx) {
     elementsWithBindings[binderIdx] = elementsWithBindingsDynamic[binderIdx];
   }
   var viewRootNodes;
   if (protoView.isTemplateElement) {
     var childNode = DOM.firstChild(DOM.content(rootElementClone));
     viewRootNodes = [];
     while (childNode != null) {
       ListWrapper.push(viewRootNodes, childNode);
       childNode = DOM.nextSibling(childNode);
     }
   } else {
     viewRootNodes = [rootElementClone];
   }
   var binders = protoView.elementBinders;
   var boundTextNodes = [];
   var boundElements = ListWrapper.createFixedSize(binders.length);
   var viewContainers = ListWrapper.createFixedSize(binders.length);
   var contentTags = ListWrapper.createFixedSize(binders.length);
   for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
     var binder = binders[binderIdx];
     var element;
     if (binderIdx === 0 && protoView.rootBindingOffset === 1) {
       element = rootElementClone;
     } else {
       element = elementsWithBindings[binderIdx - protoView.rootBindingOffset];
     }
     boundElements[binderIdx] = element;
     var childNodes = DOM.childNodes(DOM.templateAwareRoot(element));
     var textNodeIndices = binder.textNodeIndices;
     for (var i = 0; i < textNodeIndices.length; i++) {
       ListWrapper.push(boundTextNodes, childNodes[textNodeIndices[i]]);
     }
     var viewContainer = null;
     if (isBlank(binder.componentId) && isPresent(binder.nestedProtoView)) {
       viewContainer = new ViewContainer(this, element);
     }
     viewContainers[binderIdx] = viewContainer;
     var contentTag = null;
     if (isPresent(binder.contentTagSelector)) {
       contentTag = new Content(element, binder.contentTagSelector);
     }
     contentTags[binderIdx] = contentTag;
   }
   var view = new View(protoView, viewRootNodes, boundTextNodes, boundElements, viewContainers, contentTags);
   for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
     var binder = binders[binderIdx];
     var element = boundElements[binderIdx];
     if (isPresent(binder.componentId) && isPresent(binder.nestedProtoView)) {
       var childView = this._createView(binder.nestedProtoView);
       view.setComponentView(this._shadowDomStrategy, binderIdx, childView);
     }
     if (isPresent(binder.eventLocals)) {
       ListWrapper.forEach(binder.eventNames, (eventName) => {
         this._createEventListener(view, element, binderIdx, eventName, binder.eventLocals);
       });
     }
   }
   if (protoView.isRootView) {
     view.hydrate(null);
   }
   return view;
 }