将jQuery数据表与Aurelia一起使用

我需要一些关于使用Aurelia的jQuery数据表的建议。基本上我遇到了两个问题

在

repeat.for

绑定循环完成后，我无法确定初始化它的最佳方式。显然，即使启动了

attached（）

生命周期，该循环仍在工作

如果我使用

$（myRef）.DataTables（data:myArray）

方法填充表格，并插入链接（

${record.p_fname}
${record.p_lname}

问题2:以下是我尝试使用jQuery方法填充表的情况。DataTables成功加载了表，但Aurelia无法识别链接或触发操作

$(this.tblUserList).dataTable({
  "paginate": true,
  "pageLength": 10,
  data: this.records,
  columns: [
    { data: 'user_username',
      fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
        $(nTd).html("<a route-href='route: user; params.bind: {id:" + oData.user_id + "}' click.delegate='$parent.select(" + oData.user_id + ")'>" + oData.user_username + "</a>");
      }
    },
    { data: 'p_fname' },
    { data: 'p_lname' }
  ]
});   

$（this.tblUserList）.dataTable({
“paginate”：正确，
“页面长度”：10，
数据：此项记录，
栏目：[
{数据：'用户\用户名'，
fnCreatedCell：函数（nTd、sData、oData、iRow、iCol）{
$（nTd）.html（“”）；
}
},
{数据：'p_fname'}，
{数据：'p_lname'}
]
});   

有人能帮我解决上面的任何一个问题吗？或者……我是不是用错误的方法处理了整个问题？是使用jQuery方法来填充，还是使用Aurelia

repeat.for

binding循环更好？

使用第一种方法（Aurelia binding），从配置对象中删除数据，并将数据加载到激活生命周期挂钩中：

import 'datatables';

export class UserList {
    activate() {
        this.records = [...];
    }

    attached() {
        $(this.tblUserList).dataTable();
    }
}

使用第一种方法（aurelia绑定），从配置对象中删除数据并将数据加载到激活生命周期挂钩中：

import 'datatables';

export class UserList {
    activate() {
        this.records = [...];
    }

    attached() {
        $(this.tblUserList).dataTable();
    }
}

---

我知道这是旧的，但以防万一，如果它可以帮助。 当您在绑定后添加DOM元素时，它们不会被金色化。您应该使用

TemplatingEngine

的增强方法：

导入

模板引擎

并将其注入：

import {inject, TemplatingEngine} from 'aurelia-framework';
@inject(TemplatingEngine)

在构造函数中，初始化模板引擎：

constructor(templatingEngine) {
    this.templatingEngine = templatingEngine;
}

在Aurelia的

attached（）

方法中，执行datatable init操作，并添加一个类来检索新创建的DOM元素：

$(nTd).html("<a class='myclass' ...

$('.myclass').each(function (index, value) { 
  let el = $(this);
  if (!el.hasClass('au-target')) { //can't enhance already aureliazed elm
    this.templatingEngine.enhance({element: el[0], bindingContext: this});
    //el[0] is important to have DOM and not jQuery object
  }
});

---

那么你的绑定应该可以用了。

我知道这是旧的，但以防万一，如果可以的话。 当您在绑定后添加DOM元素时，它们不会被金色化。您应该使用

TemplatingEngine

的增强方法：

导入

模板引擎

并将其注入：

import {inject, TemplatingEngine} from 'aurelia-framework';
@inject(TemplatingEngine)

在构造函数中，初始化模板引擎：

constructor(templatingEngine) {
    this.templatingEngine = templatingEngine;
}

在Aurelia的

attached（）

方法中，执行datatable init操作，并添加一个类来检索新创建的DOM元素：

$(nTd).html("<a class='myclass' ...

$('.myclass').each(function (index, value) { 
  let el = $(this);
  if (!el.hasClass('au-target')) { //can't enhance already aureliazed elm
    this.templatingEngine.enhance({element: el[0], bindingContext: this});
    //el[0] is important to have DOM and not jQuery object
  }
});

---

然后你的绑定应该可以工作。

你的问题之一可能是，

重复。for

循环从来没有真正完成过。它绑定到你的

记录

变量，因此每当更新时都会更新。不过，我对你的问题所在有点困惑。Aurelia是否正确创建了表，但jQuery从不ini它上面有

dataTable（）

？如果我添加

window.setInterval（initTable（），2000），Aurelia会正确创建表

要添加2秒延迟，它会正确初始化。您好，也许您可以尝试使用ajax加载数据。稍后我将查看您的示例我已经将数据作为JavaScript对象数组存储在本地。通过ajax获取数据是多余的，而且它仍然无法修复Aurelia无法识别链接和单击事件的事实他们是通过第三方动态添加到DOM的。我也遇到了同样的问题，我所能做的就是使用angular中的“compile”选项。不知何故，我认为我们需要触发aurelia绑定到“attach”不幸的是，我仍然没有弄清楚如何…到目前为止，我正在为datatable元素设置一个全局单击函数，然后从单击的位置进行筛选。您的问题之一可能是，

重复。for

循环从未真正完成。它绑定到您的

记录ode>变量，因此每当更新时都会更新。但我对问题所在感到有点困惑。Aurelia是否正确创建了表，但jQuery从未在表上使用init的
dataTable（）
？Aurelia正确创建了表，如果我添加
window.setInterval（initTable（），2000）
要添加2秒延迟，它会正确初始化。您好，也许您可以尝试使用ajax加载数据。稍后我将查看您的示例我已经将数据作为JavaScript对象数组存储在本地。通过ajax获取数据是多余的，而且它仍然无法修复Aurelia无法识别链接和单击事件的事实他们是通过第三方动态添加到DOM的。我也遇到了同样的问题，我所能做的就是使用angular中的“compile”选项。不知何故，我认为我们需要触发aurelia绑定到“attach”不幸的是，我仍然没有弄清楚如何…到目前为止，我正在为datatable元素设置一个全局单击函数，然后从单击的位置进行筛选。不幸的是，这不起作用，因为附加的数据仍在写入DOM，因此DataTables得到一个不完整的集可能是其他原因吗？我加载了10000条同步和异步记录，没有问题。不幸的是，这不起作用，因为在附加的数据上，数据仍在写入DOM，因此DataTables获取的数据集不完整。可能是其他原因吗？我加载了10000条同步和异步记录，没有问题。