applyBindings ignores inner div

[oehl...@googlemail.com]

Hi guys, 

i got a strange problem.

the binding only affects the div with the id 'handlager_menu', but not the included div with the id 'handlagerEntnahme'

everytime i bind the viewmodel to the 'handlagerEntnahme' div manualy, a completely different div with the id 'entnahme' is binded too.

Any ideas?

This is my html code:

<div class="modulecontent" style="text-align: center" id="handlager_menu">

<a data-bind="click: open" href="">Aus Handlager austragen</a>

<div id="handlagerEntnahme" title="Handlager/Einsatzmittel">

    Barcode:<input id="handlager_barcode" onfocus="this.select()" data-bind="value: barcode, valueUpdate: 'keyup', event{change: idToBarcode}" />

    Name:<select data-bind="options: listeSanmaterial, value: sanmaterial, optionsText: 'name'"></select>

    Lager:<select data-bind="options: listeHandlager, value: handlager, optionsText: 'name'"></select><br />

   

    <button data-bind="click: listeEntnahmeHinzufuegen" >Entnehmen</button>

    

    <hr>

    <table>

    <thead><tr><th>Name</th><th>Lager</th></tr></thead>

            <tbody data-bind="foreach: listeEntnahme" style="list-style: none">

            <tr><th data-bind="text: sanmaterial.name"></th><th data-bind="text: lager.name"></th><th><button data-bind="click: $root.listeEntnahmeEntfernen">Löschen</button></th></tr>

            </tbody>

        </table>

        <hr>

        <button data-bind="click: entnehmen">Einkauf abschließen</button>

    </div>

</div>

This my binding code:

$(document).ready(function() {

    window.handlager = new HandlagerViewmodel();

    ko.applyBindings(handlager, document.getElementById("handlager_menu"));

    

});

And this mt viewModel:

function HandlagerViewmodel()

{

var self = this;

self.handlager_entnehmen_barcode = ko.observable();

//Bereitstellen von Handlagerliste mit Abfrage ob es bereits im Lager Modul geladen ist

    if(window.lager !== undefined)

{

   console.log("is defined");

        self.listeHandlager = window.lager.listeHandlager;

}

else

{

   console.log("is not defined");

        self.listeHandlager = ko.observableArray([]);

        apiCall("listeHandlager", {}, false, function(result){

            if(IsJSON(result))

            {

                var cache = JSON.parse(result);

                

                var mappedIst = $.map(cache, function(item) {

return item;

});

self.listeHandlager(mappedIst);

console.log(self.listeHandlager());

            }

            else

            {

                alert(result);

                console.log(result);

            }

        });

}

self.handlager = ko.observable();

self.listeSanmaterial = ko.observableArray([]);

apiCall("listeSanmaterial", {}, false, function(result){

        if(IsJSON(result))

        {

            var cache = JSON.parse(result);

            var mappedIst = $.map(cache, function(item) {

return item;

});

self.listeSanmaterial(mappedIst);

        }

        else

        {

            alert(result);

            console.log(result);

        }

    });

self.gewaehltesSanmaterial = ko.observable();

self.listeEntnahme = ko.observableArray();

self.barcode = ko.observable();

self.idToBarcode = function(){

        apiCall("barcodeIdLager", {barcode:self.barcode()},false, function(result){

            if(IsJSON(result))

            {

                //console.log(result);

                var id = JSON.parse(result).id

                if(id != -1)

                {

                    var match = ko.utils.arrayFirst(self.listeSanmaterial(), function(item) {

                        return id === item.id;

                    });

                    console.log(match);

                    self.gewaehltesSanmaterial(match);

                    self.listeEntnahmeHinzufuegen();

                    self.barcode('');

                    $( "#handlager_barcode" ).focus();

                }

                else

                {

                    alert("Barcode nicht gefunden");

                }

                

                

            }

            else

            {

                console.log(result);

                alert(result);

            }

        } )

}

self.listeEntnahmeHinzufuegen = function(){

        var cache = new Object({});

        cache.sanmaterial = self.gewaehltesSanmaterial();

        cache.lager = self.handlager();

        self.listeEntnahme.push(cache);

}

self.listeEntnahmeEntfernen = function(item){

   self.listeEntnahme.remove(item);

}

self.entnehmen = function(){

        apiCall("handlagerEntnehmen", self.listeEntnahme(), true, function(result){

           if(JSON.parse(result).error == "")

           {

               $( "#handlagerentnehmen" ).dialog("close");

               self.listeEntnahme.removeAll();

           }

           else

           {

               alert(JSON.parse(result).error)

           }

        });

}

self.open = function(){

   $( "#handlager" ).dialog("open");

}

}

[Noirabys]

hi,

perhaps check your html structure,

sometime unbalanced tags will be fixed by the browsers automaticly and do not result in 

error messages and give unpredicable behaviuours!

best regards,

  noirabys

[oehl...@googlemail.com]

No messed up tags, checked it

Am Mittwoch, 22. April 2015 14:54:22 UTC+2 schrieb oehl...@googlemail.com:

[Gunnar Liljas]

There are a few messed up tags. e.g <select ..... /> . Selects can't be self closed.

Run the page through a validator.

/G

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ian Yates]

If you load the HTML into your browser, and then check the DOM, without applying Knockout bindings, you should be able to inspect the DOM via your F12 tools and see that it's all still the same...  If not, then you've got some HTML issues.