从组件文件和视图模型生成原始HTML字符串 [英] Generate a raw HTML string from a component file and a view model

问题描述

我们有这样的模板。

the-template.html

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

我们想用它来做这件事。

We want to do this with it.

some-file.ts

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

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

What is the equivalent of our makeItHappen function?

推荐答案

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

以下是丢失的代码（带注释）：

Here's the code in case that goes missing (with comments):

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);
    });
  }
}

应该这样做 - 以及用法：

That should do it - and the usage:

<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字符串）。

Obviously, this doesn't have to be a custom attribute - you can just inject the bits and compile in a helper class or something like that (which can just return the raw HTML string).

这将相当于你的 makeItHappen 在自定义属性中运行附加方法。当然你需要所有的deps所以你需要至少得到Aurelias依赖注入支持来获得那些。

This would make the equivalent of your makeItHappen function the attached method in the custom attribute. Of course you need all the deps so you need to at least have Aurelias dependency injection support to get hold of those.

注意：我'如果你计划将内容添加到DOM中，建议总是使用ViewSlot（假设你有一个可以充当锚点的元素），因为这是Aurelia的工作方式，并且它会有更一致的结果，因为ViewSlots知道如何添加/删除优雅的孙子

Note: I'd suggest always using a ViewSlot if you plan on adding the content to the DOM (assuming you have an element that can act as the anchor) since that's the way Aurelia works and it will have more consistent results since ViewSlots know how to add/remove grandchildren gracefully

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

This may not be possible in the case that you have a 3rd party plugin that accepts strings as template input - but if possible look for extension points that work with DOM nodes instead.

这篇关于从组件文件和视图模型生成原始HTML字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！