多個Model的依賴

標籤：style   blog   http   color   io   使用   ar   java   strong   

比較坑的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的依賴