2

シンプルなビュー モデル ( widget.js ) があるとします。

import {Behavior} from 'aurelia-framework';

export class Widget
{
    static metadata() { return Behavior.customElement('widget') }

    constructor()
    {
        this.title= "AwesomeWidget";
    }
}

次のビュー: ( widget.html ):

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

ここで、次のようなマークアップを DOM に挿入するとします。

    var markup       = `<div><widget></widget></div>`;
    var $markup      = $(markup);
    var $placeholder = $("#placeholder");

    $placeholder.append($markup);

この新しく追加された DOM の部分を Widget の新しいインスタンスに対してコンパイルするように Aurelia に指示するにはどうすればよいでしょうか? ViewCompiler が関係していることはわかっていますが、参考になる例が必要です。助けていただければ幸いです。ありがとう！

4

2 に答える 2

3

例を次に示します: https://gist.run/?id=762c00133d5d5be624f9

Aurelia のビュー コンパイラを使用して html をコンパイルし、提供されたビュー モデルにバインドされたビュー インスタンスを作成します。

view-factory.js

import {
  inject,
  ViewCompiler,
  ViewResources,
  Container,
  ViewSlot,
  createOverrideContext
} from 'aurelia-framework';

@inject(ViewCompiler, ViewResources)
export class ViewFactory {
  constructor(viewCompiler, resources, container) {
    this.viewCompiler = viewCompiler;
    this.resources = resources;
    this.container = container;
  }

  insert(containerElement, html, viewModel) {
    let viewFactory = this.viewCompiler.compile(html);
    let view = viewFactory.create(this.container);
    let anchorIsContainer = true;
    let viewSlot = new ViewSlot(containerElement, anchorIsContainer);
    viewSlot.add(view);
    view.bind(viewModel, createOverrideContext(viewModel));
    return () => {
      viewSlot.remove(view);
      view.unbind();
    };
  }
}

使用法：

let view = this.viewFactory.insert(containerElement, viewHtml, viewModel);
于 2015-08-23T11:38:04.367 に答える