0

你好我有下一个代码：

 <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 元素。为什么不发生？

4

2 回答 2

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

于 2013-04-08T08:10:15.527 回答
1

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

ko.applyBindings(viewModel1, $('#section1')[0]);
ko.applyBindings(viewModel2, $('#section2')[0]);
于 2013-04-08T08:26:27.830 回答