В DataTables я добавляю render()
в columnDefs
, чтобы разрешить пользовательский html в очень простой привязке. Я хочу добавить синтаксис vue в функцию рендеринга и сделать так, чтобы datatables бросал этот блок в каждую строку. Примерно так:
new Vue({
el: "#app",
components: {"data-tables": datatables},
data: {
message:"hi",
tableData: [...]
columnDefs: [{
title: "Actions", width: "20%", data: null,
render: (data: any, type: string, row: any, meta: object) => {
return `<div class="row hcenter">
<a title="Edit" class="btn btn-default" type="button">
<i class="fa fa-edit"></i>{{message}}
</a>
</div>`}
}]
}
})
и шаблон:
{
template: '<table v-bind:id="tableId"></table>',
props: ["tableData", "columnDefs", "options", "tableId"],
data() {
return { dtHandle: null }
},
watch: {
tableData(val, oldVal) {
...
}
},
mounted() {
this.$nextTick(() => {
// Other things
...
// Create datatable and save
this.dtHandle = $(this.$el).DataTable(options);
// Probably something here to bind anything new <<<<<<<<<<<<<<<<<<<<<<
});
}
}
Исходя из мира нокаутов, я бы сделал следующее, чтобы применить привязки по требованию:
ko.cleanNode(element);
ko.applyBindings(context, element);
Есть ли что-то подобное в Vuejs, которое позволило бы мне выбросить произвольный HTML-код на страницу и связать Vue с текущей моделью?
Кроме того, есть ли другой способ сделать это или что-то подобное? Я пытаюсь сделать компонент datatables как можно более простым и универсальным, поэтому я действительно хочу передавать все, что могу, со страницы, содержащей его.