我们经常使用到这样的功能，我们在界面里面拖动一个滑动条，模型就变小或者变大了；我们拖动一个滑动条，场景颜色变暗淡了，我们输入一个数字，我们的体重就变.........这里就想想就好啦
bbaa.gif
这一切的原因都归功于Cesium.knockout；但需要注意Cesium中的knockout与Knockoutjs，功能层面上有大多数是相同的，但是他俩不是完全一样的；但是Cesium中使用了Knockoutjs的库，目前的1.55版本是引用了Knockoutjs的v3.4.2版本，所以这里我们索性来了解下Knockoutjs这个库，不要问我为什么，我就是想学习下。
一、Knockout.js介绍
Knockoutjs是一个轻量级的MVVM库，专注于实现数据与视图的绑定，本身并不提供 UI 类和路由等功能，能够友好地处理数据模型和界面DOM的绑定，并且是双向绑定，和VUE中的v-model功能类似哦，这样可以极大的减少代码量和对DOM元素的操作监控，关于啥是MVVM看图说话吧。
MVVM模式
试想没有Knockoutjs的时候我们需要监测DOM的变化，我们会用到什么，jquery的bind？还是注册一个Dom的on某某事件，不管怎么样，后期的改变时都需要和DOM操作，当还是几个DOM的操作时，是可以忍忍算了，但是50个呢，100个呢，甚至更多，代码量会成倍的增加，并且代码复用性不高，用一个高上大的词，耦合度太高。
1、Knockout.js中的监控属性observable
先上一张图看效果，看着效果如何？
监控属性
接着来看代码，我们来看下实现步骤：
a、定义viewmodel，这里我们定义为model，里面两个属性，一个数量，一个总价。
b、与Dom绑定，我们使用data-bind绑定了值。（对应input标签的文本，需要使用textinput，而普通标签的文本使用text即可）
c、使用ko.observable绑定了num对象
d、使用计算监控属性ko.pureComputed，计算总价
d、激活knockout的绑定，也就是ko.applyBindings(model);
<body>
<p>价格：1000</p>
<a>数量：</a><input type="text" data-bind='textinput:num' /><br /><br />
<a>总价：</a><a data-bind='text: total'></a >
<script type="text/javascript">
var model={
num:ko.observable(12),
total:123
};
model.total = ko.pureComputed(function () {
return 1000*model.num();
})
ko.applyBindings(model);
</script>
</body>
看到这里我想你会说，这也没有啥啊，我用textchange照样实现一样的功能，当然你说观点完全正确，无可反驳，但是observable意义在于不操作DOM，我们在JS中只需要关心怎么修改model.num()，而不是如何操作DOM。
另外提一句，ko.pureComputed计算监控，这里相当于计算价格*数量，为啥我定义的num属性使用的时候要使用model.num()，因为ko.observable已经把它变为了一个函数了，需要具体了解的同学可以度娘下。
2、Knockout.js中的监控依赖属性DependentObservable
又是一张图来了，看看效果有差别吗，好像没有啥差别是吧
监控依赖属性
那还是来看代码吧,敲黑板了哦，看下model中的total呢？为啥没有了，还是计算了总价，这是我们使用了监控依赖属性，而且同时监控了两个DOM对象哦
<body>
<p>价格：1000</p>
<a>数量：</a><input type="text" data-bind='textinput:num' /><br /><br />
<a>运费：</a><input type="text" data-bind='textinput:freight' /><br /><br />
<a>总价：</a><a data-bind='text: total'></a >
<script type="text/javascript">
var model={
num:ko.observable(12),
freight:ko.observable(20),
};
model.total = ko.dependentObservable(function () {
return 1000*model.num()+Number(model.freight());
})
ko.applyBindings(model);
</script>
</body>
3、Knockout.js中的监控数组ObservableArray
老规矩先上图
ObservableArray
<body>
<a>商品类别无ID：</a><select data-bind="options:typeArrayoutID"></select><br /><br /><br />
<a>商品类别：</a><select data-bind="options:typeArray,optionsText:'name'"></select>
<button id="addBtn">新增类别</button>
<script type="text/javascript">
var typeArray=[{id:1,name:'电子商品'},{id:2,name:'日用品'},{id:3,name:'化妆品'}];
var typeArrayoutID=["电子商品","日用品",'化妆品'];
var model={
typeArray:ko.observableArray(typeArray),
typeArrayoutID:ko.observableArray(typeArrayoutID)
};
ko.applyBindings(model);
$("#addBtn").bind('click',function () {
model.typeArray.push({id:4,name:'电子商品11'});
model.typeArrayoutID.push("电子商品11");
})
</script>
</body>
我们可以不再对select进行任何操作，只需要model里面的值就行了，是不是很酷
关于更多的Knockout知识，我们可以参见官方文档：https://knockoutjs.com/documentation/introduction.html
二、Cesium.knockout介绍及使用
上面说到，Cesium中的knockout与Knockoutjs（简称ko）,不是完全一样的，但是功能大致一样，依然遵循MVVM模式，只要你理解了ko，那么使用Cesium.knockout将会轻松上手，接下来我们来看下Cesium.knockout的使用方法。
1、knockout中的监控属性getObservable
类似Knockout.js中的监控属性observable，这个属性就是用来监控属性变化的。
老规矩，先上一张效果图，看下Cesium.knockout实现的效果图。
改变飞机状态
接下来我们看下实现步骤：
1、定义viewModel
2、与DOM绑定，我们使用data-bind绑定了值（data-bind="value:scale）
3、使用Cesium.knockout.track绑定viewModel，监控viewModel中的属性（Cesium.knockout.track(viewModel)）
4、与DOM元素绑定Cesium.knockout.applyBindings(viewModel, DOM元素)
5、使用Cesium.knockout.getObservable进行属性监控，对模型进行操作
看下改变飞机大小的具体的代码实现：
<body>
<div id="cesiumContainer"></div>
<div id='mytoolbar'>
<a>大小:</a><input type="range" min="1" max="20" data-bind="value:scale,valueUpdate: 'input'" />
<a>方向:</a><input type="range" min="0" max="360" data-bind="value:orientation,valueUpdate: 'input'" />
<a>位置:</a><input type="range" min="0" max="20" data-bind="value:positionsAdd,valueUpdate: 'input'" />
</div>
<script type="text/javascript">
var ssss=5;
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
var viewModel = {
scale: 5,
orientation: 45,
positionsAdd: 0
};
Cesium.knockout.track(viewModel);
var positionstart = Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 1170);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(positionstart, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(viewModel.orientation), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0)));
var toolbar = document.getElementById('mytoolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
var modelAir = viewer.entities.add({
id: "test",
position: positionstart,
orientation: orientation,
model: {
uri: 'data/Cesium_Air.gltf',
scale: viewModel.scale,
minimumPixelSize: 20,
}
});
viewer.flyTo(modelAir);
Cesium.knockout.getObservable(viewModel, "scale").subscribe(function(value) {
modelAir.model.scale=Number(value);
});
Cesium.knockout.getObservable(viewModel, "orientation").subscribe(function(value) {
modelAir.orientation=Cesium.Transforms.headingPitchRollQuaternion(positionstart, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(Number(value)), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0)));;
});
Cesium.knockout.getObservable(viewModel, "positionsAdd").subscribe(function(value) {
modelAir.position=Cesium.Cartesian3.fromDegrees(101.80089882736969+Number(value)/10000, 26.60700234866561+Number(value)/10000, 1170);
});
}
</script>
</body>
2、knockout中的监控依赖属性DependentObservable
与Knockout.js相比Cesium.knockout一样的有监控依赖属性
改变颜色
如果我们希望在改变大小方向位置等信息的时候一起改变飞机的颜色，但是我们并没用在viewModel 对象中定义颜色的属性，如何解决呢？那么就可以使用DependentObservable。代码很简单，只有一句：
Cesium.knockout.dependentObservable(function () {
modelAir.model.color= new Cesium.Color(Number(viewModel.scale)/255, Number(viewModel.orientation)/255, Number(viewModel.positionsAdd)/255, 1);
})
3、knockout中的监控数组ObservableArray
和Knockout.js中使用方法一致，这里不再介绍了。
三、总结
Cesium.knockout对象与Knockout.js对象是不完全一样的，大部分相同但是也有很多不同的地方。可以理解为Cesium.knockout继承于Knockout.js，比如getObservable是Cesium.knockout独有的，ko没有，所以大家注意两者的的区别，建议不要混用，一个工程中使用一种足够解决问题了。
网友评论