knockout foreach dosn't work for model

Question

Hello I have next code:

 <div class="dropdownSelector" data-bind="visible: modelSelectorD.isActive()">
    <i></i>
    <input type="text" data-bind="value: modelSelectorD.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" />
    <ul data-bind="foreach: modelSelectorD.visibleData">
        <li data-bind="click: modelSelectorD.doSwitch"><a data-bind="html: modelSelectorD.getName($data,$element)"></a></li>        
    </ul>
    <span data-bind="visible:modelSelectorD.showMoreLink, text:modelSelectorD.showMoreText"></span><br/>    
    <a href="#" class="close" data-bind="click: modelSelectorD.close">Close</a>
</div>


<div class="dropdownSelector" data-bind="visible: modelSelectorC.isActive()">
    <i></i>
    <input type="text" data-bind="value: modelSelectorC.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" />
    <ul data-bind="foreach: modelSelectorC.visibleData">
        <li data-bind="click: modelSelectorC.doSwitch"><a data-bind="html: modelSelectorC.getName($data,$element)"></a></li>        
    </ul>
    <span data-bind="visible:modelSelectorC.showMoreLink, text:modelSelectorC.showMoreText"></span><br/>    
    <a href="#" class="close" data-bind="click: modelSelectorC.close">Close</a>
</div>

<script type="text/javascript">
    var obj = { id: 0, name: "not selected" };
    function selector(maxcount, serviceGet, serviceChange) {
        var self = this;
        self.isActive = ko.observable(false);
        self.maxcount = ko.observable(maxcount);
        self.serviceUrlGet = serviceGet;
        self.serviceUrlChange = serviceChange;
        self.searchText = ko.observable("");
        self.selectedItem = ko.observable(obj);
        self.allObjects = ko.observableArray([]);
        self.visibleData = ko.observableArray([]);
        self.showMoreLink = ko.computed(function () {
            return self.allObjects().length > self.maxcount();
        }
        );

        self.showMoreText = ko.computed(function () {
            return "... ( " + self.allObjects().length + " )";
        }
        );

        self.getName = function (data, element) {
            if (data) {
                var html = "<i>" + data.id + "</i> " + data.name;
                return html;
            }
            return "";
        };
        self.doSwitch = function (data) {
            self.selectedItem(data);
            self.close();
        };

        self.close = function () {
            self.isActive(false);
        };

        self.show = function () {
            self.isActive(true);
        };

        self.searchText.subscribe(function (newValue) {
            self.getData(newValue);
        });

        self.getData = function (searchText) {
            var data = { "name": searchText, "maxcount": self.maxcount() };
            $.ajax({
                type: "POST",
                url:  self.serviceUrlGet,
                cache: false,
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify(data),
                success: function (data) {
                    self.allObjects(data.d);
                    if (self.allObjects().length > self.maxcount()) {
                        self.visibleData(self.allObjects().slice(0, self.maxcount()));
                    }
                    else {
                        self.visibleData(self.allObjects());
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //console.log(textStatus);
                }
            });
        }
    }
    var modelSelectorD = new selector(5, "/services2", "");
    var modelSelectorC = new selector(5, "/services1", "");
    ko.applyBindings(modelSelectorD);
    ko.applyBindings(modelSelectorC);
    $(function () {
        modelSelectorD.getData("");
    });
</script>

it is working well except foreach, foreach dosn't show me my LI elements. Why dos't it happens ?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Check out this question: Knockoutjs Multiple Viewmodels in a single view for more information on this subject.

What you would need to do is combine the two models into one view model which you then reference.

e.g.

var viewModel = {
    modelSelectorD: new selector(5, "/services2", ""),
    modelSelectorC: new slector(5, "/services1", "")
}

ko.applyBindings(viewModel);

Or you can target a specific element to apply the bindings to.

Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.

-- http://knockoutjs.com/documentation/observables.html

Yeah, you can, see my answer for how you do it. :) – Paul Manzotti Apr 08 '13 at 08:26 — Paul Manzotti, Apr 08 '13 at 08:26

score 1 · Answer 2 · answered Apr 08 '13 at 08:26

1

You can bind different view models to different parts of the page:

ko.applyBindings(viewModel1, $('#section1')[0]);
ko.applyBindings(viewModel2, $('#section2')[0]);

answered Apr 08 '13 at 08:26

Paul Manzotti

5,107
21
27

Ah is this something new with KO? – Tim B James Apr 08 '13 at 08:28
Not sure, to be honest, it's been there the few months I've used Knockout, so it could be. – Paul Manzotti Apr 08 '13 at 08:44

knockout foreach dosn't work for model

2 Answers2