Question

我一直在探索Aurelia，到目前为止我一直喜欢我所见过的。我遇到过一个我不确定如何解决的问题。我使用jquery数据表在我当前的应用程序中使用angular，使用服务器端提取的大结果。数据表有一个函数，只要向表中添加新行，就可以调用该函数（fnRowCallback - http://legacy.datatables.net/ref#fnRowCallback，或者＃34; createdRow＆＃34; - https://datatables.net/examples/advanced_init/row_callback.html#） - 这非常方便，因为您可以重新编译每排后的dom（我知道费用很高）。

这使您可以引用数据表所在的当前作用域（或viewModel）中存在的函数。例如：

在我的视图模型中：

export class DataTableTest{

  test(){
   alert('this is a test');
 }

}

在数据表提取的返回结果中：

{name:'blah',age:40,actions:"<a click.delegate='test();'>Test</a>"}

出于某种原因，我似乎无法弄清楚如何将元素添加到dom后重新编译。

有没有人有任何想法如何做到这一点？

更新这些是我传递给数据表的原始选项：

    var options = {
        "fnRowCallback": function (nRow) {
            $compile($(nRow).contents())(scope);
        }
    };

我在注入该编译器服务后尝试了以下内容：

        "fnRowCallback": function (nRow) {
               this.compiler.compile($(nRow).contents()).fragment.innerHTML;
        },

但我总是得到Uncaught TypeError: Cannot read property 'compile' of undefined - 我在＆＃34;附加＆＃34; function ..如果我在这些选项之外的console.log（this.compiler），它是可用的。此外，我们不需要将html返回到数据表，只需对内容运行编译即可。非常感谢你的帮助！

Answer 1

您可以使用编译器服务来编译元素：

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

/**
 * Compiler service
 *
 * compiles an HTML element with aurelia
 */
@inject(ViewCompiler, ViewResources, Container)
export class Compiler {

    viewCompiler: any;
    resources: any;
    container: any;

    constructor(viewCompiler, resources, container) {
        this.viewCompiler = viewCompiler;
        this.resources = resources;
        this.container = container;
    }

    compile(templateOrFragment, ctx = null, viewSlot = null):any {
        if (typeof templateOrFragment === "string") {
            var temp = document.createElement('span');
            temp.innerHTML = templateOrFragment;
            templateOrFragment = temp;
        }

        var view = this.viewCompiler.compile(templateOrFragment, this.resources).create(this.container, ctx);

        return view;
    }
}

我在Kendo的单元模板回调函数中使用它（它允许你返回一个将成为单元格内容的字符串）

function(dataItem) {
    var cellctx = { "$item": dataItem, "$parent": ctx };
    return this.compiler.compile(templateString, cellctx).fragment.innerHTML;
}

（这发生在Aurelia＆＃39; bind回调中，所以ctx是executionContext）

我只是将当前数据项包装在上下文中，并将其别名为$item，以便我可以使用它。

看起来像这样：

<kendo-grid>
    <kendo-grid-col title="Main Office" field="IsMainOffice">
        <kendo-template><img if.bind="$item.IsMainOffice" src="/content/img/accept.png" /></kendo-template>
    </kendo-grid-col>
</kendo-grid>

Aurelia DataTables重新编译

1 个答案: