Question

我们有这样的模板。

的-template.html

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

我们希望用它做到这一点。

一些-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>

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

这会使您的makeItHappen函数等同于自定义属性中的attached方法。当然你需要所有的deps所以你至少需要Aurelias依赖注入支持才能掌握它们。

注意：如果您计划将内容添加到DOM（假设您有一个可以充当锚点的元素），我建议始终使用ViewSlot，因为这样做＆＃39;这是Aurelia的工作方式，它会有更一致的结果，因为ViewSlots知道如何优雅地添加/删除孙子

如果你有一个接受字符串作为模板输入的第三方插件，这可能是不可能的 - 但如果可能的话，寻找适用于DOM节点的扩展点。

从组件文件和视图模型

1 个答案: