Knockoutjs Component问题汇总
在使用KnockoutJs Component组件时,遇到的坑,让人晕头转向奶奶的,什么问题写的都没错啊!
1、Component绑定时,params:的参数应绑定属性引用不能绑定属性的值。
1)主页面、Component页面代码
1 <h1>主页面</h1> 2 <span>名称:</span><span data-bind="text:Name"></span><br /> 3 <span>年龄:</span><span data-bind="text:age"></span><br /> 4 <button data-bind="click:function(){eventClick()}">调用Component方法</button> 5 <h1>Component</h1> 6 <div class="row" data-bind="component:{name:'mycomponent',params:{name:Name(),age:age(),loadData:function(fun){ReLoadComponent=fun;}}}"> 7 8 </div>
View Code
1 <span>名称:</span><span data-bind="text:MyName"></span><br /> 2 <span>年龄:</span><span data-bind="text:MyAge"></span><br />
View Code
2)主页面Js代码,ComponentJs代码
1 function MainViewModel() { 2 self.Name = ko.observable("名称"); 3 self.age = ko.observable(12); 4 self.eventClick= function() { 5 self.age(123); 6 self.ReLoadComponent(); 7 } 8 self.ReLoadComponent = function() { 9 10 }; 11 } 12 13 $(function () { 14 ko.applyBindings(new MainViewModel()); 15 });
View Code
1 //注册knockout控件 2 ko.RegisterControl = function (controlName, viewModel, templateUrl) { 3 if (!ko.components.isRegistered(controlName)) { 4 ko.components.register(controlName, { 5 viewModel: viewModel, 6 template: (function () { 7 var html = ''; 8 $.ajax({ 9 url: templateUrl, data: {}, 10 type: 'get', 11 async: false, 12 dataType: 'html', 13 success: function (result) { 14 html = result; 15 }, 16 error: function () { 17 } 18 }); 19 return html; 20 })() 21 }); 22 } else { 23 if (window.console) { 24 window.console.log("controlname [" + controlName + "] is registered."); 25 } 26 } 27 } 28 //我的组件 29 //params 30 //name 名称, 31 //age 年龄 32 33 function MyComponentViewModel(params) { 34 //#region 属性/变量 35 var self = this; 36 self.MyName = ko.observable(""); 37 self.MyAge = ko.observable(0); 38 39 function fnLoadData() {//重新加载页面 外部调用 40 self.MyName(params.name +"、年龄"+ params.age);//修改名称 41 } 42 43 //#endregion 属性/变量 44 //#region 初始化 45 self.Init = function () { 46 params.loadData(fnLoadData); 47 self.MyName(params.name); 48 self.MyAge(params.age); 49 } 50 //#endregion 51 //viewModel初始化 52 self.Init(); 53 } 54 ko.RegisterControl("mycomponent", MyComponentViewModel, "/UserControls/MyComponentControl/MyComponentView.html?t=".url() + new Date().getTime());
View Code
点击“调用Component方法”的按钮的时候如下
此时Component中的名称应为“名称、年龄123”
这时再次点击“调用Component方法”的按钮的时候如下
发现第二次点击界面显示为我们预期结果。
这时调试代码,发现Component的Js代码初始化两次
问题原因:我们绑定到Component的age属性在点击“按钮”的时候对其修改了数值,这时Component认为是一个新数据,所以进行重新初始化Component
正确的绑定方式是“当绑定的数据需要变化的时候,应把这个属性的对象作为params参数,而不是将这个属性的值作为params参数”
修改后代码如下
转载于:https://www.cnblogs.com/shanhe/p/KnockoutJsComponent.html
Knockoutjs Component问题汇总相关推荐
- Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单
2019独角兽企业重金招聘Python工程师标准>>> 本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes ...
- Web前端知识技能大汇总
Web前端知识技能大汇总 来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们 ...
- 前端技能汇总 知识结构
Frontend Knowledge Structure 项目起源 前端知识结构 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox ...
- 零基础的前端开发初学者应如何系统地学习?前端技能汇总 Frontend Knowledge Structure
本文转自 张帅 于知乎<零基础的前端开发初学者应如何系统地学习?>中的回答. 知乎原文:https://www.zhihu.com/question/19834302 GitHub项目:前 ...
- Spring注解@Component、@Repository、@Service、@Controller,@Autowired、@Resource用法
一.Spring定义bean,@Component.@Repository.@Service 和 @Controller Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥 ...
- Android数据手册02:android.permission权限请求汇总
在Android开发中,当程序执行需要操作安全敏感项时,必须在androidmanifest.xml中声明相关权限请求. 比如,声明拨打电话的权限请求方法如下: 1 <uses-permissi ...
- 基于视角特征提取的3D检测方法汇总
作者丨柒柒@知乎 来源丨https://zhuanlan.zhihu.com/p/458068647 编辑丨3D视觉工坊 这篇文章主要是梳理一下近期3D Detection的进展,分类列举出一些我认为 ...
- 最新!3D目标检测论文汇总(多模态融合)
作者丨柒柒@知乎 来源丨https://zhuanlan.zhihu.com/p/447555827 编辑丨3D视觉工坊 这篇文章主要是梳理一下近期3D Detection的进展,分类列举出一些我认为 ...
- 统计计量 | 统计学中常用的数据分析方法汇总
来源:数据Seminar本文约10500字,建议阅读15+分钟 统计学中常用的数据分析方法汇总. Part1描述统计 描述统计是通过图表或数学方法,对数据资料进行整理.分析,并对数据的分布状态.数字特 ...
最新文章
- linux环境下nacos的安装+启动,阿里云服务器安装nacos
- Hadoop hdfs创建及删除目录代码示例
- [转]PHP程序61条面向对象分析设计的经验原则
- 总结UIViewController的view在有navBar和tabBar影响下布局区域的问题
- windows 下安装 mysql
- python: 图像的维度、图像读写
- python selenium文件下载
- 电子密码锁程序C语言,基于51单片机的电子密码锁程序
- 把自己的电脑作为网络代理服务器
- python画爱心 好看漂亮的表白代码
- 插件化原理解析——广播的管理
- iphone/ipad网站开发技巧整理
- 给你一个杯子,你如何测试
- 计算机运行加减乘除哪个最慢,计算机算加减乘除的时间对比
- Tensorflow 模型文件结构、模型中Tensor查看
- 获取手机号码归属地工具类
- 中华大地第二次大变革 看印度反思自我之六 印度模式更有吸引力
- 世界《模拟电路》四大名著,传说中的圣经,经典中的经典。
- win10 microsoft edge打不开网页怎么办?
- python 发送数据到Blynk服务器
热门文章
- 【STM32】窗口看门狗相关类型和函数
- 【Linux】一步一步学Linux——group文件详解(108)
- 【Linux】Linux中at命令详解
- ae去黑插件_视频素材如何去黑底?送你这款插件,自动一键去黑底。适用AE、PR...
- php 进程函数,php多进程函数
- div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)
- 字符串所有排列组合暴力递归
- 深度学习中常用的激活函数详解及对比分析(sigmoid)
- 牛客练习赛36 F-Rabbit的蛋糕 (叉积求面积, 记录前缀)
- 5.慎重选择删除元素的方法