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. 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.