最近在学Knockout.js，想要把看到的东西用blog记录下来。

Knockout.js是一个MVVM的框架，突然想起之前有人问我哪些是MVVM框架？我回答了angular.js和bootstrap(糗)，现在看了些博客，书，粗略的了解了MVVM是什么？

MVVM即Model，ViewModel,View

Model:数据模型

View：视图/UI

ViewModel：用于视图和模型的之间的数据传递。

我了解的MVVM是指大部分数据的处理用js完成，后台返回Model，通过ViewModel将数据绑定到UI。同时也可以在ViewModel中进行大部分的数据处理。有修改仅需修改ViewModel，非常方便。

Knockoutjs有监控，追踪的功能，即可以双向绑定数据。（之前的开发过程中有遇到页面没有刷新，也没有重新获取修改后数据导致后台拿到的还是修改之前的数据，这个bug找了蛮久，我觉得可以用knockoutjs双向绑定来解决）

双向绑定带来了一个好处，即不论是UI改变，还是后台传过来的Model有所变化，knockoutjs都能感知得到，这就是ko.observable()，ko.observabkeArray(),ko.computed()的功劳了。

下面看一段简单的程序：我要在页面上显示姓名，并且可以姓名可以随着我改变姓或者名而变化

<html>

<head>

    <title>Kong's Website</title>

    <script src="~/Scripts/knockout-3.5.1.js"></script>

    <script src="~/Scripts/jquery-3.3.1.js"></script>

</head>

<body>

    <p>firstName:<input type="text" data-bind="value:firstName" /></p>

    <p>lastName:<input type="text" data-bind="value:lastName" /></p>

    <p>firstName:<strong data-bind="text:firstName"></strong></p>

    <p>lastName:<strong data-bind="text:lastName"></strong> </p>

</body>

</html>

@section scripts{

    <script>

        function viewModel() {

            var self = this;

            self.firstName = ko.observable("Cherry");

            self.lastName = ko.observable("Li");

        }

        var viewModel = new viewModel();

        ko.applyBindings(viewModel);

    </script>

}

我要显示全名 即 姓+名，只需要添加在lastName后面添加

    <p>fullName:<strong data-bind="text:fullName"></strong></p>

在viewModel中添加

  self.fullName = ko.computed(function () {

                return self.firstName() + " " + self.lastName();

            });

比如我要在页面显示一个table

<html>

<head>

    <title>Kong's Website</title>

    <script src="~/Scripts/knockout-3.5.1.js"></script>

    <script src="~/Scripts/jquery-3.3.1.js"></script>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>Name</th>

                <th>Age</th>

            </tr>

        </thead>

        <tbody data-bind="foreach:Person">

            <tr>

                <td data-bind="text:name"></td>

                <td data-bind="text:type"></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

@section scripts{

    <script>

        function viewModel() {

            var self = this;

            self.Person = ko.observableArray([

                { name: "Bungle", type: "Bear" },

                { name: "George", type: "Hippo" },

                { name: "Zippy", type: "Unknown" }

            ]);

        }

        var viewModel = new viewModel();

        ko.applyBindings(viewModel);

    </script>

}

 

Knockout.js之初印象的更多相关文章

  1. Vue.js之初印象

    一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...

  2. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  3. Knockout.js初体验

    前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...

  4. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  7. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. 【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2) ...

随机推荐

  1. SQL中的trim函数

    Oracle TRIM函数是很常见的函数,下面对Oracle TRIM函数的语法作了详尽的阐述说明,希望可以让您对Oracle TRIM函数有更深的认识. 如果提到Oracle TRIM函数,最简单的 ...

  2. LeetCode 1219. Path with Maximum Gold

    原题链接在这里:https://leetcode.com/problems/path-with-maximum-gold/ 题目: In a gold mine grid of size m * n, ...

  3. dinoql 支持自定义resovler了

    dinoql 当前版本0.4.0 支持自定义reovler 了,使用也比较简单 环境准备 初始化 yarn init -y 添加依赖 yarn add dinoql graphql-tag packa ...

  4. cube.js 学习（十）cube 来自官方的学习网站

    尽管cube.js 包含了一个doc 站点,但是资料不是很全,同时如果查看了cube github 代码中的一些demo的话,发现还是很不错的 但是一些实践没有在文档展现出来,还好我们可以从cube ...

  5. Postgresql 时间串转换格式

    1. 时间:02-AUG-18 17:01:34 转成正常 年月日 时分秒 select to_char(to_timestamp('02-AUG-18 17:01:34', 'dd-mon-yy,h ...

  6. NOIP 2018 普及组 解题报告

    目录 标题统计 题目链接 思路 代码 龙虎斗 题目链接: 思路 代码 摆渡车 题目链接: 思路 对称二叉树 题目链接 思路: 先来解释一下为毛现在才来发解题报告: 其实博主是参加过NOIP 2018普 ...

  7. 【BZOJ4475】 [Jsoi2015]子集选取

    题目描述 数据范围 \(1\leq N,K \leq 10^9\) \(solution\) 集合S中每个元素互不影响,不妨依次考虑其中一个元素在三角形中的出现情况 问题转化为一个\(0/1\)的三角 ...

  8. 【洛谷P5049】旅行（数据加强版）

    题目链接 m=n-1是直接按字典序dfs就行, m=n时是一棵基环树,我们发现当一个点在环上时,可以把它和它的一个在环上的儿子之间的边删掉,然后回溯,到达它的第一个有其他儿子的祖先的另一个儿子上,我们 ...

  9. Mac的移动硬盘不能装载该如何解决?

    昨天拔硬盘时,不能弹出,赶着要睡觉,就直接拔掉USB接口,谁料到今天再插进去,电脑不能识别,无法装载了. 我的天那, 里面很多重要资料,我以为硬盘坏了,要重新格盘了...T T 还好在网上找到了大神们 ...

  10. Comparison of SIFT Encoded and Deep Learning Features for the Classification and Detection of Esca Disease in Bordeaux Vineyards（分类MobileNet，目标检测 RetinaNet）

    识别葡萄的一种虫害,比较了传统SIFT和深度学习分类,最后还做了目标检测 分类用的 MobileNet,目标检测 RetinaNet MobileNet 是将传统深度可分离卷积分成了两步,深度卷积和逐 ...