applyBindings()方法

 applyBindings(viewModule,domNode)方法,用于激活数据模型与dom节点绑定的关系(data-bind属性的标签),通过该方法两者才会产生联系


viewModule:(必须)视图模型对象,即js对象。用于存储数据

domNode:(可选)dom节点对象,指定knockout控制html的控制范围,默认为document,限制只在指定对象someElementId和后代节点中进行激活操作。 


例如:

//省略前面代码,需要引入核心js文件,<script type="text/javascript" src="js/knockout-3.4.2.js"></script>

<body>

名字:<span data-bind="text:name"></span>

<script type="text/javascript">

var viewModule={//视图模型对象,用于存储数据,与dom节点进行绑定

name:"数据内容"//该属性绑定到data-bind中的name变量,两者的数据值是相同的

};

//将数据模型绑定到相应的节点上面

ko.applyBindings(viewModule);//静态绑定,不能动态的改变

</script>

</body>

上面的显示的结果为:    “ 名字:数据内容”


代码分析:在上面的代码当中,给<span>标签的text属性绑定一个name变量,用于给,<span>标签的内容传值,viewModule对象,就是数据模型,里面存储着数据,用于向绑定的标签对应的变量传值,比如:name属性对应data-bind中的name变量,所以通过ko.applyBindings(viewModule)方法,就可以进行绑定传值


注意:绑定的时候viewModule中的变量要与data-bind中的变量要相对应


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Vue改写的代码: ``` <template> <div id="toolbar"> <label>Brightness:</label> <input type="range" min="0" max="2" step="0.1" v-model="brightness" /> <br> <label>Contrast:</label> <input type="range" min="0" max="2" step="0.1" v-model="contrast" /> <br> <label>Hue:</label> <input type="range" min="0" max="360" step="10" v-model="hue" /> <br> <label>Saturation:</label> <input type="range" min="0" max="2" step="0.1" v-model="saturation" /> <br> <label>Gamma:</label> <input type="range" min="0" max="2" step="0.1" v-model="gamma" /> </div> </template> <script> export default { data() { return { brightness: 1, contrast: 1, hue: 0, saturation: 1, gamma: 1 }; }, watch: { brightness(val) { this.updateLayerParameter('brightness', parseFloat(val)); }, contrast(val) { this.updateLayerParameter('contrast', parseFloat(val)); }, hue(val) { this.updateLayerParameter('hue', parseFloat(val)); }, saturation(val) { this.updateLayerParameter('saturation', parseFloat(val)); }, gamma(val) { this.updateLayerParameter('gamma', parseFloat(val)); } }, mounted() { // Make the active imagery layer a subscriber of the viewModel this.subscribeLayerParameter('brightness'); this.subscribeLayerParameter('contrast'); this.subscribeLayerParameter('hue'); this.subscribeLayerParameter('saturation'); this.subscribeLayerParameter('gamma'); }, methods: { subscribeLayerParameter(name) { this.$watch(name, function(newValue) { var layer = sceneLayer; // Replace `sceneLayer` with your actual layer object layer[name] = parseFloat(newValue); // sceneLayers[0].refresh(); // Uncomment this line if needed }); }, updateLayerParameter(name, value) { this[name] = value; } } } </script> ``` 在这个Vue组件中,我们使用了`v-model`指令来绑定滑块的值到`viewModel`对象的属性上。我们使用了Vue的`watch`方法来监听`viewModel`对象属性的变化,当属性变化时,我们调用`updateLayerParameter`方法来更新属性值。我们还使用了`mounted`方法来在组件挂载后订阅图层参数的变化。最后,我们使用了`$watch`方法来监听属性变化,并更新图层参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值