Knockout.js 每个dosn和x27的淘汰赛；我不适合模特儿

你好，我有下一个代码：

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

var obj={id:0，名称：“未选定”}；
函数选择器（maxcount、serviceGet、serviceChange）{
var self=这个；
self.isActive=ko.可观察（假）；
self.maxcount=ko.可观察（maxcount）；
self.serviceUrlGet=serviceGet；
self.serviceUrlChange=serviceChange；
self.searchText=ko.可观察（“”）；
self.selectedItem=ko.obj；
self.allObjects=ko.observearray（[]）；
self.visibleData=ko.observearray（[]）；
self.showMoreLink=ko.computed（函数（）{
返回self.allObjects（）.length>self.maxcount（）；
}
);
self.showMoreText=ko.computed（函数（）{
返回“…”（+self.allObjects（）.length+”）；
}
);
self.getName=函数（数据、元素）{
如果（数据）{
var html=”“+data.id+“”+data.name；
返回html；
}
返回“”；
};
self.doSwitch=功能（数据）{
self.selectedItem（数据）；
self.close（）；
};
self.close=函数（）{
自我激活（假）；
};
self.show=函数（）{
自我激活（真）；
};
self.searchText.subscribe（函数（newValue））{
self.getData（newValue）；
});
self.getData=函数（searchText）{
var data={“name”：searchText，“maxcount”：self.maxcount（）}；
$.ajax({
类型：“POST”，
url:self.serviceUrlGet，
cache:false，
contentType:'应用程序/json'，
数据类型：“json”，
数据：JSON.stringify（数据），
成功：功能（数据）{
自身所有对象（数据d）；
if（self.allObjects（）.length>self.maxcount（））{
self.visibleData（self.allObjects（）.slice（0，self.maxcount（））；
}
否则{
self.visibleData（self.allObjects（））；
}
},
错误：函数（jqXHR、textStatus、errorshown）{
//console.log（textStatus）；
}
});
}
}
var modelSelectorD=新选择器（5，“/services2”，”）；
var modelSelectorC=新选择器（5，“/services1”，”）；
ko.应用绑定（modelSelectorD）；
ko.应用绑定（modelSelectorC）；
$（函数（）{
modelSelectorD.getData（“”）；
});

除了foreach，它工作得很好，foreach没有向我展示我的LI元素。为什么不发生呢

查看此问题：有关此主题的更多信息

您需要做的是将两个模型合并到一个视图模型中，然后引用该视图模型

e、 g

或者，您可以将绑定应用到特定的元素

或者，您可以传递第二个参数来定义 要搜索数据绑定属性的文档。例如 ko.applyBindings（myViewModel， document.getElementById（'someElementId'））。这限制了 激活ID为someElementId的元素及其子元素， 如果希望有多个视图模型并关联，则此选项非常有用 每个页面都有一个不同的区域

---

--

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

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

---

是的，你可以，看看我对你如何做到这一点的回答。：）啊，这对KO来说是新的吗？不确定，说实话，我使用击倒的几个月里，它一直在那里，所以它可能是。

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