首页 > 代码库 > 多个Model的依赖
多个Model的依赖
比较坑的ko.applyBindings
第二个参数(可选)
可以声明成使用data-bind的HTML元素或者容器。例如， ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))。它的现在是只有作为someElementId 的元素和子元素才能激活KO功能。 好处是你可以在同一个页面声明多个view model，用来区分区域。
这里需要注意的是:如果存在多个Model,其中任意一个Model被指定了元素，其余的Model 也需要指定元素。
看下如下例子
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script><script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script> <title></title></head><body> <script language="javascript" type="text/javascript"> $(document).ready(function () { var kfModel = { firstName: ‘kf‘, personAge: 100 }; var yfModel = { personName: ‘yf‘, personAge: 50 }; ko.applyBindings(kfModel, document.getElementById("kf")); ko.applyBindings(yfModel); }); </script> The name is <span id="kf" data-bind="text: firstName"></span></br> The name is <span id="yf" data-bind="text: personName"></span></body>
结果: 
personName 没有绑定上，如果需要绑定，每个Model都需要指定元素，这样太奇葩了。
如果一个Grid里面包含了Select，这样子没有办法依赖了.
解决办法如下：
https://github.com/sergun/Knockout-MultiModels
1.添加如下JS，JS存在先后关系
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="Scripts/jquery.livequery.js"></script> <!--Plugin--> <script type="text/javascript" src="Scripts/knockout.multimodels-0.1.js"></script>
2.把ko.applyBindings修改成ko.attach,追加Model名称,并且给元素指定对象名称
<html xmlns="http://www.w3.org/1999/xhtml"> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="Scripts/jquery.livequery.js"></script> <!--Plugin--> <script type="text/javascript" src="Scripts/knockout.multimodels-0.1.js"></script><head> <title></title></head><body> <script language="javascript" type="text/javascript"> $(document).ready(function () { var viewModel = { availableCountries: [‘France‘, ‘Germany‘, ‘Spain‘] }; var yfModel = { personName: ‘yf‘, personAge: 100 }; //ko.applyBindings(yfModel); //ko.applyBindings(f_yeModel); ko.attach("viewModel", viewModel); ko.attach("yfModel", yfModel); }); </script> <div data-model="yfModel"> The name is <span id="customer2" data-bind="text: personName"></span> <div data-model="viewModel"> <select id="tt" data-bind="options: availableCountries"></select> </div> </div></body></html>
运行效果 
多个Model的依赖
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。