淘汰赛 foreach 不适用于模型

Question

你好，我有下一个代码：

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

除了 foreach 外，它运行良好，foreach 不显示我的 LI 元素。为什么不发生？

Answer 1

查看这个问题：Knockoutjs Multiple Viewmodels in a single view 了解有关此主题的更多信息。

您需要做的是将这两个模型组合成一个视图模型，然后您可以引用它。

例如

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

ko.applyBindings(viewModel);

或者您可以针对特定元素应用绑定。

（可选）您可以传递第二个参数来定义 要搜索数据绑定属性的文档。例如， ko.applyBindings(myViewModel, document.getElementById('someElementId'))。这限制了 激活 ID 为 someElementId 的元素及其后代， 如果您想拥有多个视图模型并关联，这很有用 每个都有不同的页面区域。

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

Answer 2

您可以将不同的视图模型绑定到页面的不同部分：

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