Knockoutjs的环境搭建教程

最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试。
首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs，笔者这里下载的是knockout-2.2.0.js。然后新建一个.html文件，在html文档中加入以下的语句导入此js：
<script type="text/javascript" src="knockout-2.2.0.js"></script>
到这里我们就已经可以编写Knockoutjs的代码了，我们以打印"Hello World !!"为例，编写以下的代码：


代码如下:

<script type="text/javascript" src="knockout-2.2.0.js"></script>
<span data-bind="text:helloWorld"></span>
<script type="text/javascript">
var AppViewModel = {
helloWorld:'Hello World !!'
};
ko.applyBindings(AppViewModel);
</script>

然后使用浏览器打开此html文件，即可看到"Hello World!!"的字样。
在以上代码中:
<span data-bind="text:helloWorld"></span>
定义了一个span，并使用data-bind将helloWorld绑定到span上，这样span中的内容即为helloWorld变量中的内容。


代码如下:

<script type="text/javascript">
var AppViewModel = {
helloWorld:'Hello World !!'
};
ko.applyBindings(AppViewModel);
</script>

在script中定义了一个AppViewModel，然后为其定义了一个变量：helloWorld，它的值为：Hello World!!，然后使用ko.applyBindings()方法将AppViewModel激活，这样才能在网页中看到此内容。
以上只是使用Knockoutjs做了一个非常简单的例子，在运行这个例子的过程中，出现了一个小小的问题，我也不是很清楚为什么。之前写的代码是：


代码如下:

<script type="text/javascript" src="knockout-2.2.0.js"></script>
<script type="text/javascript">
var AppViewModel = {
helloWorld: 'Hello World !!'
};
ko.applyBindings(AppViewModel);
</script>
<span data-bind="text:helloWorld"></span>

我将<script>放到了<span>的前面，这样就显示不了任何的内容，不是很清楚其中的原因，还请大家指教。

赞 (0)

相关推荐

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • KnockoutJS 3.X API 第四章之表单value绑定

    KnockoutJS 3.X API 第四章之表单value绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容. 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上. 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定. 额外的好

  • KnockoutJS 3.X API 第四章之事件event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me 源码: <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visibl

  • KnockoutJS 3.X API 第四章之click绑定

    目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked 0timesClick me 源码: <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter&q

  • Knockoutjs快速入门(经典)

    Knockoutjs快速入门(经典)

    Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中返回true即可. 例如: <form

  • Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试. 首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js.然后新建一个.html文件,在html文档中加入以下的语句导入此js: <script type="text/javascript" src="knockout-2.2.0.js"&

  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表

  • windows server 2008/2012安装php iis7 mysql环境搭建教程

    windows server 2008/2012安装php iis7 mysql环境搭建教程

    windows server 2008/2012安装php iis7 mysql环境搭建教程,具体内容如下 1.安装IIS windows server 2008的IIS版本为7.0,包括fastcgi,安装十分方便. 打开"开始"菜单→"服务器管理",出现服务器管理界面(图1) 图1 - 服务器管理 滚动条下翻,或者点击主菜单的"角色",然后点击"添加角色",出现向导页面后点击下一步,选择"web服务器(IIS)&

  • Win2008 R2 IIS7.5+PHP5(FastCGI)+MySQL5环境搭建教程

    Win2008 R2 IIS7.5+PHP5(FastCGI)+MySQL5环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2008 R2 PHP版本:php 5.4.4 MySQL版本:MySQL5.5.25 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.4.4-nts-Win32-VC9-x86.zip 2.MySQL下载地址: http://gd.tuwien.ac.at/db/mysql/Downloads/MySQLInstaller/mysql-ins

  • Visual Studio 2017+OpenCV环境搭建教程

    Visual Studio 2017+OpenCV环境搭建教程

    OpenCV环境搭建教程分享,供大家参考,具体内容如下 OpenCV包准备 下载地址:http://opencv.org/downloads.html 在官网上随便找一个Sample: http://docs.opencv.org/3.2.0/examples.html 1: 2: 3:拷贝官网的代码:ffilldemo.cpp 呀!!怎么报这么多错,看看提示原来是无法找到opencv的源文件.那么,少了, 我们就加上吧 添加好了之后又发现: 需要以下设置: 设置后发现还有问题: 设置后发现还是

  • VS2017 Cordova Ionic2 移动开发环境搭建教程

    VS2017 Cordova Ionic2 移动开发环境搭建教程

    分享VS2017 Cordova Ionic2 移动开发环境搭建教程 1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装Visual Studio 2017community 3.1 官方下载地址:https://www.visualstudio.com/downloads/ 3.2 运行安装程序,需选中使用JavaScript的移动开发,如下图所示. 3.3 进行VS2017扩展

  • CentOS下RabbitMq高可用集群环境搭建教程

    CentOS下RabbitMq高可用集群环境搭建教程

    CentOS下RabbitMq高可用集群环境搭建教程分享给大家. 准备工作 1.准备两台或多台安装有rabbitmq-server服务的服务器 我这里准备了两台,分别如下: 192.168.40.130 rabbitmq01 192.168.40.131 rabbitmq02 2.确保防火墙是关闭的3,官网参考资料 http://www.rabbitmq.com/clustering.html hosts映射 修改每台服务上的hosts文件(路径:/etc/hosts),设置成如下: 192.1

  • Centos7 ftp环境搭建教程详解

    Centos7 ftp环境搭建教程详解

    没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊.下面把劳动成果分享到我们平台,感兴趣的朋友参考下吧! 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网络设置为NAT或桥接模式都是可以的) 输入命令nmtui 打开网络配置 回车->回车 将倒数第二项 Automatically connect 勾上 然后就有网络了 然后更新系统:yum update 查看vsftpd是否已安装:vsftpd -v

  • Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程

    Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.5.8-nts-Win32-VC11-x86.zip 2.MySQL下载地址: http://cdn.mysql.com/Downloads/MySQLInstaller/mysql-installer-com

  • Android Studio开发环境搭建教程详解

    Android Studio开发环境搭建教程详解

    对于移动端这块,笔者之前一直都是进行iOS开发的,也从来没用过Java.但是因为进入了Google Android全国大学生移动互联网创新挑战赛(进入官网)的总决赛(笔者"西部计算机教育提升计划"的项目被直接推荐进入决赛),这个比赛要求一定要提交apk程序,所以我不得不赶紧学习一下Android开发了. 下面就对自己学习的过程做一个记录. 一.安装Android Studio 笔者用的计算机配置如下: Mac下安装Android Studio应该更简单一些,只需要下载一个Android

随机推荐