文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Knockout简单用法

在最近做的一个项目中，页面数据全部通过js ajax调用webapi接口获取，也就是说页面的数据全部使用javascript脚本填充，这就想到了使用一个MVVM模式的js框架来做这件事，在该项目中选择了...任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很简单的帮你实现并且很容易维护。...简称：KO 官方网站：http://knockoutjs.com 2 入门介绍 1、  创建不带有监控属性的ViewModel 创建一个view model，只需要声明任意的JavaScript object...但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？...3 使用Knockout 在我们的系统中，每一个页面都会定义一个ViewModel，该ViewModel存储页面所有的数据，并通过ajax读取数据并填写ViewModel。

1.8K20

基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

不才的本人曾以JQuery走天涯；后又接受了Knockoutjs，被他MVVM思想所吸引；也学习和了解过vue，他确实很棒，很了不起，但他不兼容ie8-（基于他的几款UI框架对低本的IE支持都不友好）。...因此公式就变成了 knockoutjs + easyui + webpack + koeasyui = ?的形式。其koeayui是组合knockoutjs和easyui而形成一套UI框架的能力。...模板框架地址：https://gitee.com/front-sam/pc-base.git 一、如何解决对jquery，easyui的依赖     解决这类问题，我采用了较为粗鲁的一种做，就是把这类依赖包直接入到...最初我一味的执着于用webpack进行jquery, knockoutjs, koeasyui的引用。但随后想想此架构其实只能局限于pc端的管理系统，也没办法做到服务端渲染和h5端通用。...二、组件开发规范如何定义和实现      因为本人对vue较为喜欢，所以很想模仿其实现文件组件方案。

1.4K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Knockout.Js官网学习（简介）

    ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。...我们再从IView这个interface层来解析，它可以帮助我们把各类UI与逻辑层解耦，同时可以从UI层进入自动化测试（Unit/Automatic Test）并提供了入口，在以前可以由WinForm/...当程式码改变ViewModel属性值，其对应的输入/显示栏位元素便会自动更新；而在UI栏位填入不同内容，ViewModel的资料属性也会立刻被修改为新值。...5.免费，开源纯JavaScript的 - 可跟jQuery的或其他JavaScript框架兼容，缩小的版本只有40KB，HTTP压缩后只有14KB跨浏览器！...简单调用 @{ ViewBag.Title = "First"; } @ViewBag.Message 输入值：</

    3.1K20

    Knockout.Js官网学习（Mapping插件）

    由于view model属性是observable的，在他们变化的时候，KO会自动更新绑定的HTML元素。 接下来，从服务器获取最新的数据。...或许每隔5秒你要调用一次Ajax请求（例如，使用jQuery的$.getJSON或$.ajax函授）： ///获取服务器端数据 function GetData() {...你可以通过ko.mapping.fromJS 函数定期从服务器获取数据，然后更新你的view model： ko.mapping.fromJS(data,{}, viewModel...); 如何mapping 　　对象的所有属性都被转换成observable类型值，如果获取的对象的值改变了，就会更新这个observable类型的值.      ...与JSON字符串一起使用 如果你的Ajax调用返回的是JSON字符串（而不是反序列化后的JavaScript对象），你可以使用ko.mapping.fromJSON函数来创建或者更新你的view model

    2K10

    一些前端框架的比较（上）——GWT、AngularJS 和 Backbone.js

    》，AngularJS、EmberJS 和 KnockoutJS 都能实现双向绑定，但是各有优劣，很有意思。...这最初看起来是 “反最佳实践” 的——我们都说 View 这一层要纯粹，要守规矩，JQuery 之类类库的做了那么多工作把绑定的行为从 DOM 中分离出去，怎么历史倒退了，View 怎么可以知道那么多的东西...在 MVVM 中，我们知道 ViewModel 的就是给 View 专门用的数据模型，但是 Angular 提供的如同管道一般的过滤器，把或简单或复杂的 DataModel 转化为 ViewModel...通常从服务端 Ajax 获取数据也是使用它来完成的。 Router 层也是很好的设计，清晰简单，专门负责 URL mapping，代码风格依然和上面一样保持一致。...无论是 Model 中的数据通过 set 方法来主动更新（JavaScript 代码更新），需要在 Model 中 bind 事件来监听；还是 DOM 树上的呈现发生被动变化（用户更新），需要在 View

    2.6K10

    KnockoutJS语法

    Knockout基础 2.1 MVVM模式 　　Knockoutjs遵循Model(M)—View(V)—ViewModel(VM)模式 ? ?...2.2 单次绑定 　　从ViewModel绑定至UI这一层只进行一次绑定，不追踪数据在任何一方的变化，适用于数据展现 　　Javascript与Html示例如下 function AppViewModel...2.3 双向绑定 　　无论数据在ViewModel或者是UI中变化，将会更新另一方，最为灵活的绑定方式，同时代价最大 function AppViewModel() { this.firstName...init方法根据dom元素传入参数当前状态设置初始显示效果；update方法在pointsUsed 每次发生更新时触发，更新元素显示效果  3.2 Template binding 　　模板绑定用模板的渲染结果来填充关联的...5.3 属性依赖如何实现 　　调用observable中getter方法时，ret函数对象收集所有对自身的依赖对象 　　调用observable中setter方法时，ret函数对象想依赖对象发生通知 ?

    2.8K40

    Front-End MV*简述(一)

    而随着Ajax等技术的出现，如今的web应用的也变得越来越复杂，相比于桌面应用来说也不虚。...如果此时我们还是仅仅使用jquery类库来开发web应用，那么随着应用的功能越来越丰富，业务逻辑越来越复杂，你的代码就可能会变成这样： ? 然后应用就会在一堆杂乱无章的选择器和回调函数中死亡。...传统的MVC模式是从GUI编程衍生的MVC模式： M是Models，表示应用中特定领域(domain-specific)的数据或业务规则，我把他理解为是一个具有数据结构能代表现实实体的抽象形式，当然还有就是当...Models 然而，前端Javascript框架并不严格遵循传统的MVC模式，部分框架的解决方案实现了所谓的Model-View-Presenter(MVP) and Model-View-ViewModel...同年，MVVM思想也开始出现，knockoutjs就是较早的尝试，但由于作者并不是搞前端的，不熟悉javascript语言，使得knockout的绑定语法被许多开发者吐槽。

    1.2K100

    Front-End MV*简述(一)

    而随着Ajax等技术的出现，如今的web应用的也变得越来越复杂，相比于桌面应用来说也不虚。...如果此时我们还是仅仅使用jquery类库来开发web应用，那么随着应用的功能越来越丰富，业务逻辑越来越复杂，你的代码就可能会变成这样： ? 然后应用就会在一堆杂乱无章的选择器和回调函数中死亡。...传统的MVC模式是从GUI编程衍生的MVC模式： M是Models，表示应用中特定领域(domain-specific)的数据或业务规则，我把他理解为是一个具有数据结构能代表现实实体的抽象形式，当然还有就是当...Models 然而，前端Javascript框架并不严格遵循传统的MVC模式，部分框架的解决方案实现了所谓的Model-View-Presenter(MVP) and Model-View-ViewModel...同年，MVVM思想也开始出现，knockoutjs就是较早的尝试，但由于作者并不是搞前端的，不熟悉javascript语言，使得knockout的绑定语法被许多开发者吐槽。

    84510

    现代前端技术解析：现代前端交互框架

    的静态方法； 使用事件代理，不要直接使用元素的事件绑定； 尽量使用新的jQuery版本； 尽可能使用链式写法来提高编程效率和代码运行效率 随着AJAX技术盛行，SPA（Single Page Application...Model：用于存放请求的数据结果和数据对象； View：用于页面DOM的更新与修改； Controller：用于根据前端路由条件（例如不同的HASH路由）来调用不同Model给View渲染不同数据内容...数据Model的调用和模板内容的渲染不需要我们主动操作，而是ViewModel自动来触发完成，任何用户的操作也是通过ViewModel的改变驱动的。...数据变更检测： 方式 原理 说明 手动触发绑定 通过在数据对象上定义get()、set()方法（函数中包含View层的渲染），手动触发 需要主动调用重新扫描HTML页面上的所有节点的方法 脏检测机制 ViewModel...所以，我们可以将新的Model data和旧的Model data进行对比，然后记录ViewModel的改变方式和位置，就知道怎样更新本次修改。

    1.4K30

    Singal Page App：使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上

    结合目前工作中用到的东西，我决定把我的博客项目的前端部分整个重写，（以前的就是一坨…） 步入正题 背景知识 RequireJS http://www.requirejs.org/ Knockout http://knockoutjs.com...，呵呵，呵呵，正如Knockout官方文档里说的，Everyoue loves jquery。.../Libs/bootstrap-3.2.0/dist/css/'     }, shim的配置略过； 然后就是require的调用入口了，从这里启动整个前端应用： require(['lib/jquery...从上一节内容可以看到，主模块将会一次调用子模块的load和render方法，在这个子模块catalog中，load阶段，通过对服务端的api调用得到了文章目录，API的地址是通过config文件的解析传递过来的...API，获得数据，然后使用knockout进行数据绑定，在ViewModel中，可以看到一个openArticle方法，同样发布了一个事件，在这个示例中，是右articleViewer监听的，由于原理相近

    1.5K60

    现代前端技术解析：现代前端交互框架

    高效实用jQuery： 尽可能使用id选择器进行DOM查询操作； 缓存一切需要复用的jQuery DOM对象，使用find()子查询； 不要滥用jQuery，尽可能使用原生代码代替； 尽可能使用jQuery...Model：用于存放请求的数据结果和数据对象； View：用于页面DOM的更新与修改； Controller：用于根据前端路由条件（例如不同的HASH路由）来调用不同Model给View渲染不同数据内容...数据Model的调用和模板内容的渲染不需要我们主动操作，而是ViewModel自动来触发完成，任何用户的操作也是通过ViewModel的改变驱动的。...数据变更检测： 方式 原理 说明 手动触发绑定 通过在数据对象上定义get()、set()方法（函数中包含View层的渲染），手动触发 需要主动调用重新扫描HTML页面上的所有节点的方法 脏检测机制 ViewModel...所以，我们可以将新的Model data和旧的Model data进行对比，然后记录ViewModel的改变方式和位置，就知道怎样更新本次修改。 ?

    1.2K31

    金九银十求职季，前端面试大全送给你

    27、如何创建ajax /* 封装ajax函数 * @param {string}opt.type http连接的方式，包括POST和GET两种方式 * @param {string}opt.url...的扩展，就是为jquery类添加成员函数 使用： jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用 33、作用域...此过程中进行ajax交互。 - beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。...- updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。...然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。 - beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

    1.9K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券