Question

我有这个观点：

<template>
<require from="../customElements/spinner.html"></require>
<div class="sub-submenu-wrapper">
    <div show.bind="success">
        <div class="sub-submenu-header">
            <a href="#/roommanage">
                <div class="sub-submenu-header-top">
                    <i class="fa fa-chevron-left sub-submenu-header-top-icon"></i>
                </div>
            </a>
            <div class="sub-submenu-header-bottom">
                <h2>Manage Rooms</h2>
            </div>
        </div>
        <div class="sub-submenu-content">
            <div class="managerooms-wrapper">
                <table id="tableData" class="stripe row-border cell-border"></table>
            </div>
        </div>
    </div>
    <div class="sub-submenu-loading" show.bind="!success">
        <spinner></spinner>
    </div>
</div>

以下是模型：

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';
import 'isomorphic-fetch';
import {appState} from '../appState';
import 'jquery';
import 'datatables.net';

@inject(HttpClient, Router, appState)
export class ManageRooms{

    tableData = [];
    success = false;

    constructor(http, router, appstate){
        this.http = http;
        this.router = router;
        this.jsonobj = {
            'operation':'getrooms'
        };
    }

attached(){
this.http.fetch('assets/api/api.php', {
  method: 'post',
  body: JSON.stringify(this.jsonobj)
})
.then(response =>  response.json())
.then(data => {
  if (data.error==='true') {
    console.log(data.errortype);
  }else {
    for(var i = 0; i < data.length; i++){
      this.tableData.push(
        {
          0: "<div>"+data[i].roomno+"</div>",
          1: "&nbsp"+data[i].roomtype,
          2: "<div>"+(data[i].booked ? 'Yes':'No')+"</div>",
          3: "<div class='actionButtonsArea'>"
             +"<a href='1'><i class='fa fa-eye fa-bot'></i></a>"
             +"<a href='1'><i class='fa fa-edit fa-bot'></i></a>"
             +"<a href='3'><i class='fa fa-remove fa-bot'></i></a>"
             +"<a href='4'><i class='fa fa-trash-o fa-bot'></i></a>"
             +"</div>"
        }
      );
    }
    $('#tableData').DataTable({
        autoWidth: false,
        data: this.tableData,
        columns: [
          {title: "Room No"},
          {title: "Type"},
          {title: "Occupied"},
          {title: "Action"}
        ]
      }
    );
    this.success = true;  
  }
})
.catch(response =>{

 });
}

detached(){
  $('#tableData').DataTable().destroy("remove");
}
}

总之，我正在进行一次获取调用，获取一些数据，从中创建一个表。我想要的是使我插入的HTML数据（即表格）可绑定或连接到我的视图模型。我在这里找到了一些关于Aurelia增强功能的信息：http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/但是我无法弄清楚如何将它与我自己的代码集成。

Answer 1

概述

先决条件：有一些已经在工作的aurelia应用程序
导入TemplatingEngine
将动态html插入DOM（例如，通过.innerHTML）
使用正确配置调用TemplatingEngine.enhance(config)

详细

先决条件 - 创建骨架：

au new enhance_test

我使用最小的例子，使用Aurelia CLI中提供的骨架。

实际代码：

app.html：

<template>
   <h1>${message}</h1>
   <div id="content-div"></div>
</template>

app.ts：

import {autoinject, TemplatingEngine} from 'aurelia-framework';

@autoinject
export class App {
  message = 'Hello World!';

  constructor(private _templEngine: TemplatingEngine) { }

  attached() {
    let contentDivElem = document.getElementById("content-div");
    contentDivElem.innerHTML = "<button>TEST ${message}</button>"; //inserting your dynamic HTML

    let elemView = this._templEngine.enhance({ element: contentDivElem, bindingContext: this}); //binding the element to the instance of App
  }
}

增强Aurelia模型以处理动态加载的HTML

1 个答案:

概述

详细