knockout页面中绑定model，一个页面中绑定多个model

最新推荐文章于 2021-08-04 09:22:56 发布

weixin_33682790

最新推荐文章于 2021-08-04 09:22:56 发布

阅读量545

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/1576753

版权

2019独角兽企业重金招聘Python工程师标准>>>

knockout页面中绑定model有两种方式，ko.applyBindings 和 ko.attach

ko.applyBindings

可以声明成使用data-bind的HTML元素或者容器。 ko.applyBindings(myViewModel,document.getElementById(‘someElementId‘))
第二个参数可选。
可以在同一个页面声明多个view model，用来区分区域。
代码

//Knockout数据绑定
var ViewModel = function() {};
var jsonArray = [];
var viewModel = new ViewModel();
viewModel.data = ko.observableArray(jsonArray);
ko.applyBindings(viewModel, document.getElementById("content"));
//使用后已监控属性数据，后期只改变viewModel.data数据即可实现view层同步刷新。
    		
var cntModel = {};
cntModel.total_count = ko.observable("0");
ko.applyBindings(cntModel, document.getElementById("header"));

ko.attach

添加如下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>

追加Model名称,并且给元素指定对象名称

<div data-model="viewModel">
    <ul>
        <li data-bind="foreach:data">
            <span data-bind="text:name"></span>
        </li>
    </ul>
</div>

var ViewModel = function() {};
var jsonArray = [];
var viewModel = new ViewModel();
viewModel.data = ko.observableArray(jsonArray);
ko.attach('viewModel',viewModel);

坑

+ 使用ko.applyBindings时， 如果存在多个Model,其中任意一个Model被指定了元素，其余的Model 也需要指定元素。
+ 数据已经获取到并且改变了，但是页面内容未改变，原因可能是又重新监控了一次，多写了一次viewModel.data = ko.observableArray(jsonArray);查查看试试删除。

转载于:https://my.oschina.net/yxmBetter/blog/1576753