Tenho o seguinte código utilizando Ajax para buscar os dados em um Restful e carregando os campos em um array ListaUsuarios com knockout:
$.ajax({
type: "GET",
url: "http://192.168.15.4/api/usuarios",
contentType: "application/javascript",
dataType: "json",
beforeSend: function () {
$('#imageLoad').show();
$('#imageError').hide();
},
success: function (result) {
var observableData = ko.mapping.fromJS(result);
var array = observableData();
self.ListaUsuarios(array);
// Method to filter the assets table based on user input. Computed observable is throttled to ensure it doesn't kick in too quickly.
self.filteredAssets = ko.computed(function () {
debugger;
var filter = self.filter();
if (!filter) {
return self.ListaUsuarios();
} else {
return ko.utils.arrayFilter(self.ListaUsuarios(), function (item) {
return item.login().indexOf(filter) > -1;
});
}
}).extend({
throttle: 500
});
self.selectedAsset = ko.observable();
self.selectAsset = function (item) {
self.selectedAsset(item);
};
})
Feito isso carrego uma table na página html usando o array ListaUsuarios carregado anteriormente com o mapping do knockout, especificando os campos que eu desejo.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th align=center width=60 style="display: none">Código</th>
<th>Nome/Razão social</th>
<th>Login</th>
<th>CPF/CNPJ</th>
<th>Email</th>
</tr>
</thead>
<tbody data-bind="foreach: {data: ListaUsuarios()}">
<tr>
<td style="display: none" data-bind="text: id"></td>
<td data-bind="text: pessoa.razao_social"></td>
<td data-bind="text: login"></td>
<td data-bind="text: pessoa.cpf_cnpj"></td>
<td data-bind="text: email"></td>
</tr>
</tbody>
</table>
Esse código funciona perfeitamente. Mas queria criar um template (componente) com essa table para que não precisasse repetir o código para cada table diferente que eu tivesse, por exemplo a table seria só:
<tbody data-bind="foreach: {data: ListaUsuarios()}">
<tr>
//aqui a table seria criada dinamicamente atraves do componente com template criado no knockout.
</tr>
</tbody>
O resto ficaria a cargo do componente que carrega o template, tentei fazer isso usando alguns exemplos como por exemplo : http://jsfiddle.net/mbest/pfmk1k2e/ mas sem sucesso
o json recebido é:
[{"pessoa":{"id":1,"tipo":"J","razao_social":"INTELIDER","nome_fantasia":"INTELIDER LTDA","cpf_cnpj":"10999558000186","rg_insc_estadual":"132456789"},"id":1,"login":"gleyson","senha":"123456","email":"[email protected]","ativo":"S"},{"pessoa":{"id":11,"tipo":"J","razao_social":"I9MAKER LTDA","nome_fantasia":"INTELIDER LTDA","cpf_cnpj":"00000000000000","rg_insc_estadual":"123456"},"id":11,"login":"sistemas","senha":"123456","email":"[email protected]","ativo":"S"}]"