1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Knockout

Discussão em 'Web Development' iniciada por Filipe_O, 5 de Junho de 2018. (Respostas: 2; Visualizações: 343)

  1. Filipe_O

    Filipe_O Power Member

    Boas pessoal.
    Num curso online de front-end development, desenvolvi uma pequena app que exibe uma lista de imagens e ao carregar numa imagem, um objecto é passado para a view e a imagem é apresentada junto com outras propriedades do objecto:
    Código:
    let viewModel = function () {
        let self = this;
        this.cats = ko.observableArray([]);
        catList.forEach(function(catItem) {
            self.cats.push(new Gata(catItem));
        });
        this.currentCat = ko.observable((self.cats()[0]))
        this.setCat = function(data) {
            self.currentCat = ko.observable(data);
        }   
    }
    CatList é um array de objectos.
    Gata é uma função que aplica observadores a propriedades.

    O código anterior não funciona. Para funcionar, teria de ser:
    Código:
    self.currentCat(data);
    
    Ao invés do colocado. A minha questão é: Porquê?

    Obrigado
     
  2. snoopy21

    snoopy21 Power Member

    Os ko.observable são funções que permitem ler e atualizar um valor. A sintaxe é:

    Ler valor
    Código:
    object.property()
    Atualizar valor
    Código:
    object.property(newValue)
     
  3. Filipe_O

    Filipe_O Power Member

    Obrigado!

    Entretanto, tenho um problema que ainda não consegui resolver:
    Tenho uma caixa de pesquisa com um sistema de auto-complete em que, quando o user digita algo existe uma filtragem.
    Tenho um console.log a mostrar os resultados, e a filtragem está a ser bem feita.
    O resultado é inserido num array que por sua vez é "observado" por um Observable array.
    Porém, o observableArray não actualiza o UI quando o array actualiza:

    HTML:

    Código:
    <div class="bar-list" data-bind="foreach: obpubList">
                            <div class="list-item" data-bind="text: name, click: pubClicked"></div>
                        </div>
    Definição do Observable Array:
    Código:
    let viewModel = {
        populateList () {
            _pubList = model.pubsInfo;
            obpubList = ko.observableArray(_pubList);
        }
    }
    Alteração da UI, no model:
    Código:
    searchResults(input) {
            if(input.length > 0) {
                _pubList= [];
                 model.pubsInfo.forEach((element, index)=>{
                    if ((model.pubsInfo[index].name).includes(input)) {
                         this.name = model.pubsInfo[index].name;
                         this.latlng = model.pubsInfo[index].latlng;
                         let data = {name:this.name, latlng:this.latlng};
                         _pubList.push(data)
                    }
                })
            }
        }
    O Array actualiza, mas o observable array não.
    Podes-me ajudar?
    Obrigado

    EDIT:
    Fazendo console.log do array observável na função que "enche" a lista, obtenho os valores filtrados mas a DOM continua sem ser actualizada:
    model:
    Código:
    model.pubsInfo.forEach((element, index)=>{
    (...)
    })
    viewModel.populateList(pubList)
    viewModel.populateList:

    Código:
    populateList (_pubList) {
            pubList = _pubList || model.pubsInfo;
            pubClicked = (element, index) => viewModel.createIW(element,model.markers[index.handleObj.guid-1]);
            obpubList = ko.observableArray(pubList);
            console.log(obpubList());
        }
     
    Última edição: 26 de Junho de 2018

Partilhar esta Página