Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Problema ao adicionar um item a uma lista de um objeto interno knockou

$
0
0

Boa tarde pessoal deixa eu tentar explicar meu problema. Eu tenho o seguinte json:

var dados [
{
"descricao": "Planilhas e documentação",
"idCategoria": 3,
"resposta": "",
"Situacoes": [
{
"id": 69546,
"observacao": "Esta sendo implantado 02.03 "
},
{
"id": 69860,
"observacao": "Água (reservatório)"
}
]
},
{
"descricao": "Melhorar a higienização",
"idCategoria": 5,
"resposta": "",
"Situacoes": [
{
"id": 69833,
"observacao": "Refrigerador 05.03 "
}
]
}
]

Com este Json eu monto um accrodion

function SituacaoModel() {
var self = this;
self.resposta = ko.observable();
self.Categorias = ko.observableArray(ko.utils.arrayMap(dados, function(item) {
return { descricao: item.descricao, idCategoria: item.idCategoria, resposta: "", Situacoes: ko.observableArray(item.Situacoes) };
}));

self.create = function(item) {
var r = $(".observacao");
console.log(this);
console.log(self.resposta());
if (r.val() !== "") {
var match = ko.utils.arrayFirst(self.Categorias(), function(item) {
return item.idCategoria === item.idCategoria;
});
var situacao = {
id: match.Situacoes.length + 1,
observacao: r.val()
};
match.Situacoes.push(situacao);
r.val("");
}
};

self.remove = function (item) {
self.Situacoes.remove(item);
};

self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.Categorias));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.Categorias);
};
};

var viewModel = new SituacaoModel();
ko.applyBindings(viewModel);

Segue o html:

<div class="panel-group" id="accordion-content" role="tablist" aria-multiselectable="true" data-bind="foreach: { data: Categorias, as: 'cat' }">

<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title" role="tab" data-bind="attr: {id: 'heading_'+cat.idCategoria}">
<a data-toggle="collapse" data-parent="#accordion-content" aria-expanded="true" aria-controls="collapseOne" data-bind="attr: {href: '#cat_'+cat.idCategoria},text: cat.descricao" style="display:block;"></a>
</h3>
</div>
<div class="resposta panel-collapse collapse" role="tabpanel" data-bind="attr: {id: 'cat_'+cat.idCategoria}">
<div class="panel-body">
<div class="form-group form-horizontal">
<div class="input-group">
<span class="input-group-btn ajuda">
<button data-bind="attr: {value: cat.idCategoria}" class="carregarAjuda btn btn-info">
<i class="glyphicon glyphicon-question-sign"></i>
<span class="hidden-sm hidden-xs">Ajuda</span>
</button>
</span>
<input type="text" id="observacao" name="observacao" class="observacao form-control" data-bind='value: $root.resposta'/>
<span class="input-group-btn salvar">
<button class="btn btn-success" id="enviar" type="submit" data-bind='click: $root.create'><i class="glyphicon glyphicon-plus"></i></button>
</span>
</div>
</div>
<ul class="catresposta list-group" data-bind="foreach: { data: Situacoes, as: 'sit' }">
<li class="list-group-item" data-bind="attr: {id: sit.id}">
<div class="row">
<div class="container-fluid">
<div class="col-md-8 col-xs-12">
<span data-bind="text: sit.observacao"></span>
</div>
<div class="col-md-4 col-xs-12 text-center">
<div class="btn-group">
<button class="btn btn-danger">
<i class="glyphicon glyphicon-remove"></i> <span class="hidden-md hidden-sm hidden-xs">Deletar</span>
</button>
<button class="btn btn-warning">
<i class="glyphicon glyphicon-pencil"></i> <span class="hidden-sm hidden-xs">Editar</span>
</button>
<a data-bind="attr: {href: '#fotos_'+sit.id}" data-toggle="collapse" class="btn btn-success add_fotos" rel="rtl">
<i class="glyphicon glyphicon-camera"></i> <span class="hidden-sm hidden-xs">Fotos</span>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container-fluid">
<div class="collapse" data-bind="attr: {id: 'fotos_'+sit.id}">
<hr />
<div class="fotos">
fotos aqui
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Meu problema está em pegar o valor que o usuario vai informar no input observação() para criar uma nova situação e adicionar no item correto, eu so consegui pegar o valor utilizando jquery, mas utilizando jquery so consigo fazer funcionar no primeiro acordion nos demais não funciona.

Alguém tem alguma ideia de como posso resolver? Minha necessidade é adicionar novas situações de acordo com item que que o usuário esteja.

Pra ficar claro minha necessidade segue imagem.US1Gk.jpg eu quero que ao escrever algo e clicar no mais de Planilhas e documentação seja adicionado um novo item apenas na lista de situações que ja contem 3 situações, da mesma forma na lista de É necessário providenciar.


Viewing all articles
Browse latest Browse all 14190

Trending Articles