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


结果:
ZVCVLJL90_9)V995ITKLEJK

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>


运行效果
image

posted @ 2014-09-26 17:42  kfsmqoo  阅读(640)  评论(0)  编辑  收藏  举报