javascript - 从组件文件和 View 模型生成原始 HTML 字符串

Question

我们有这样一个模板。

the-template.html

<template><div>${Foo}</div></template>

我们想用它来做这件事。

some-file.ts

let htmlString = makeItHappen('the-template.html', { Foo = 'bar' });
console.info(htmlString); // <div>bar</div>

什么是我们的 makeItHappen 函数的等价物？

Answer 1

好的，这是要点:https://gist.run/?id=d57489d279b69090fb20938bce614d3a

以下是防止丢失的代码(带有注释):

import {bindable} from 'aurelia-framework';
import {ViewLocator,ViewSlot,ViewEngine,ViewCompileInstruction} from 'aurelia-templating';
import {inject, Container} from 'aurelia-dependency-injection';

@inject(Element,ViewLocator,ViewEngine,Container)
export class LoadViewCustomAttribute {
  @bindable view;
  @bindable viewModel;

  constructor(element,vl,ve,container) {
    this.element = element;
    this.vl = vl;
    this.ve = ve;
    this.container = container;
  }

  attached() {
    // Get a view strategy for this view - this will let Aurelia know how you want to locate and load the view
    var view = this.vl.getViewStrategy(this.view);

    // Create a view factory from the view strategy (this loads the view and compiles it)
    view.loadViewFactory(this.ve, new ViewCompileInstruction()).then(vf => {
      // Create a view from the factory, passing the container (you can create a child container at this point if you want - this is what Aurelia usually does for child views) 
      var result = vf.create(this.container);
      // Bind the view to the VM - I've passed the current VM as the override context which allows Aurelia to do away with the $parent trick 
      result.bind(this.viewModel, this);

      console.log(result); // for inspection

      // Optional - create a viewslot and add the result to the DOM - 
      // at this point you have a view, you can just look at the DOM
      // fragment in the view if you want to pull out the HTML. Bear in 
      // mind, that if you do add to the ViewSlot - since nodes can only 
      // belong to 1 parent, they will be removed from the fragment in 
      // the resulting view (don't let this confuse you when debugging 
      // since Chrome shows a LIVE view of an object if you console.log(it)!) 

      // var vs = new ViewSlot(this.element, true);
      // vs.add(result);

      // Since you can't just get a fragments HTML as a string, you have to
      // create an element, add the fragment and then look at the elements innerHTML...         
      var div = document.createElement('div');
      div.appendChild(result.fragment);
      console.log(div.innerHTML);
    });
  }
}

应该这样做 - 以及用法:

<template>
  <require from="load-view"></require>
  <section>
    <div load-view="view.bind: 'view-to-load.html'; view-model.bind: { someData: 'test' }"></div>
  </section>
</template>

最后是 view-to-load.html

<template>
  <div>
    this is the template...  ${someData}
  </div>
</template>

显然，这不一定是自定义属性 - 您可以只注入(inject)位并在辅助类或类似的东西中编译(它可以只返回原始 HTML 字符串)。

这将使您的 makeItHappen 函数等效于自定义属性中的 attached 方法。当然，您需要所有的部门，所以您至少需要拥有 Aurelias 依赖注入(inject)支持才能掌握这些部门。

注意:如果您计划将内容添加到 DOM(假设您有一个可以充当 anchor 的元素)，我建议始终使用 ViewSlot，因为这就是 Aurelia 的工作方式并且它会有更一致的结果，因为 ViewSlots 知道如何优雅地添加/删除孙子

如果您有一个接受字符串作为模板输入的第 3 方插件，这可能是不可能的 - 但如果可能的话，寻找与 DOM 节点一起工作的扩展点。