Knockoutjs快速入门,visible绑定使用方法
分类:计算机网络

knockoutjs 简称 ko
ko的动态属性是指,ViewModel不明显的习性,而前期却必要的习性。
如何是不分明属性,比如ListModel若是编辑某一项,想把这一项的状态更动为艾德it。数据并不富含Edit属性,mvvm绑按期,会发觉报错。
那正是说自然需求开展ko技艺达到大家的目标。
先是来认识有值属性绑定,和 无值属性绑定:
一、有值属性绑定
JS模型:

Knockoutjs是贰个JavaScript实现的MVVM框架。主要有如下多少个功效:

**轻便的绑定

复制代码 代码如下:

  1. Declarative bindings

  2. Observables and dependency tracking

  3. Templating

**首先依旧先定义四个ViewModel

$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable(1);
};
ko.applyBindings(new viewModel());
});

它对于分离前台的事务逻辑和视图简化数据绑定进度有显明的效果与利益。闲言少叙,间接看例子,如何下载也不说了,假使用VS开辟的话用Nuget就可以一键化解。

复制代码 代码如下:

UI绑定:

1.为主绑定和依附追踪
率先要求定义二个ViewModel:

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  ///起首化的时候div是visible的    
    };

复制代码 代码如下:

复制代码 代码如下:

    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    ko.applyBindings( AppViewModel);

<div data-bind='text:text'></div>

<script type="text/javascript">
function ViewModel() {
this.firstName = "Zixin";
this.lastName = "Yin";
}
</script>

还要经过ko.applyBindins实行激活Knockout。
接下来定义二个UI界面成分

呈现:
图片 1 
二、无值属性绑定
JS模型:

然后是三个用来展现那个ViewModel的View:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<div data-bind="visible:shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

$(function () {
var viewModel = function () {
var self = this;
self.text = ko.observable();
};
ko.applyBindings(new viewModel());
});

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

运作之后此div在伊始化的时候依然显得的能够,之后就被另行赋值为false,导致此div被隐形掉了。
参数:
当参数设置为贰个假值时(比如:布尔值false, 数字值0, 恐怕null, 大概undefined) ,该绑定将设置该因素的style.display值为none,让要素遮蔽。它的先行级高于你在CSS里定义的别的display样式。
当参数设置为多个真值时(譬喻:布尔值true,也许非空non-null的对象大概数组) ,该绑定会去除该因素的style.display值,让要素可知。然后你在CSS里自定义的display样式将会自动生效。
若是参数是监督检查属性observable的,那成分的visible状态将基于参数值的扭转而生成,借使不是,那成分的visible状态将只设置三次何况将来不在更新。
采纳函数恐怕表达式来决定成分的可知性
您也足以采纳JavaScript函数可能表明式作为参数。那样的话,函数可能表明式的结果将决定是还是不是出示/遮蔽那些成分。举个例子:

自然text是一般值类型,用法 和 有值属性绑定同样,假使非值类型,而属性是三个目的,而急需利用with:
UI绑定:

从那么些view中能够观望表明式绑定的意义,只必要在标签上应用data-bind属性,就足以将数据的值绑定到相应的地点。有了View和ViewModel还需求代码将这两个关系起来:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<script type="text/javascript">
    var AppViewModel = {
        shouldShowMessage: ko.observable(true),   ///开始化的时候div是visible的
        myValues: ko.observableArray([])        
    };

<div data-bind='with:text'>
<div data-bind="text:property"></div>
</div>

ko.applyBindings(new ViewModel());

    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    AppViewModel.myValues.push("some value");                   ///向myValues数组中 增多多少个项
    ko.applyBindings( AppViewModel);
</script>

三、动态属性绑定:
动态属性绑定,那么这么些脾性本人不明确,沿用ko的主意是很难去落成,所以 须求举办举办。
JS拓展:

将她们放到一齐,注意,applyBinding那代码必得在页面全体加载完事后施行。页面显示为:

在ViewModel中增加了贰个myValues的属性值
再者给myValues的数组加多了贰个项
而且在页面UI中绑定了贰个要素

复制代码 代码如下:

图片 2

复制代码 代码如下:

//雾里看花 Q:397386036
ko.bindingHandlers.ext = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.utils.unwrapObservable(valueAccessor());
for (var handler in value) {
if (value.hasOwnProperty(handler)) {
if (typeof viewModel[value[handler]] == 'undefined') {
viewModel[value[handler]] = ko.observable();
}
ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; });
}
}
}
};

上边再看observables,那么些效果不是与生俱来的,必需求把View Model设置为observable,方法如下:

<div data-bind="visible: myValues().length > 0">   
  You will see this message only when 'myValues' has at least one member.
</div>

JS模型:

复制代码 代码如下:

就这么当增添完"some value"成分之后,myValues().length>0 则结果为true
那便是说此div就能议及展览示出来。

复制代码 代码如下:

function ViewModel() {
this.firstName = ko.observable("Zixin");
this.lastName = ko.observable("Yin");
}

您或许感兴趣的文章:

  • Knockoutjs 学习系列(二)花式捆绑
  • Knockoutjs 学习系列(一)ko初体验
  • BootstrapTable与KnockoutJS相结合贯彻增删改查成效【二】
  • BootstrapTable与KnockoutJS相结合贯彻增加和删除改查功效【一】
  • Knockout text绑定DOM的运用办法
  • Knockout数组(observable)使用详解示例
  • Knockoutjs快捷入门(杰出)
  • Knockoutjs的条件搭建教程
  • ko knockoutjs动态属性绑定技巧运用
  • 用Javascript评估客商输入密码的强度(Knockout版)
  • 深切浅析knockout源码解析之订阅

$(function () {
var viewModel = function () {
};
ko.applyBindings(new viewModel());
});

其他都无需转移,这时候,倘使改换输入框中的值,当难点离开的时候,可以窥见p中的值也随之变动了:

UI绑定:

图片 3

复制代码 代码如下:

上面再看dependency tracking,也正是一旦三个值信赖多各值,在那之中任何二个值产生变化,它都会自动发出变化. 那是通过computed方法达成的,代码如下:

<div data-bind="ext:{text: 'text'}"></div>
<!--事件 便于 测试-->
<a href="javascript:void(0)" data-bind="click:function(){$data.text(1);}">更改text值</a>

复制代码 代码如下:

ext中,第一个text是ko text方法,第三个text必得是字符串,是context/viewModel的习性。所以ext的动态属性,能够应用于其余ko方法,譬喻ext:{text:'text', value:'text'}
呈现:
图片 4

function ViewModel() {
this.firstName = ko.observable("Zixin");
this.lastName = ko.observable("Yin");
this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this);
}

你大概感兴趣的稿子:

  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API 第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合贯彻增加和删除改查功效【二】
  • BootstrapTable与KnockoutJS相结合贯彻增加和删除改查功效【一】
  • Bootstrap与KnockoutJs相结合贯彻分页效果实例详解
  • Knockoutjs快捷入门(优良)
  • Knockoutjs的景况搭建教程
  • KnockoutJS 3.X API 第四章之事件event绑定

小心获得二个observable的值是一个函数调用。那样当first 可能last name爆发改变的时候fullName也会自行跟着变动。

图片 5

也足以通过代码改造observable的值,页面会自动刷新:

复制代码 代码如下:

function ViewModel() {
//………
this.capitalizeLastName = function () {
this.lastName(this.lastName().toUpperCase());
}
}

在页面上增加一个按键:

复制代码 代码如下:

<button data-bind="click: capitalizeLastName">Caps</button>

点击开关之后便会出发viewmodel的capitalizeLastName方法,要转移叁个observable的值的方法就是将新值作为函数调用的参数。点击之后:

图片 6 

2. 列表绑定

加盟我们有如下的订单ViewModel,使用observableArray来追踪数组的改动。

复制代码 代码如下:

var products=[{name:"Thinkpad X1",price:9000},
{name:"Hp ProBook",price:5555},
{name:"Mouse",price:45} ];

function Order() {
var self = this;
self.items = ko.observableArray([
//This data should load from server
new Item(products[0], 1),
new Item(products[1],2)]);
self.price = ko.computed(function () {
var p=0;
for (var i = 0; i < self.items().length; i++) {
var item = self.items()[i];
p += item.product.price * item.amount();
}
return p;
}, self);
}

Order里面的Item实际上应该是从服务器获得的,Item定义如下:

复制代码 代码如下:

function Item(product, amount) {
var self = this;
this.product = product;
this.amount = ko.observable(amount);
this.subTotal = ko.computed(function () {
return self.amount() * self.product.price;
}, self);
}

ViewModel希图好以往,就可以完结View。本次须要利用foreach绑定,如下:

复制代码 代码如下:

<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: product.name"></td>
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
<td data-bind="text: subTotal"></td>
</tr>
</tbody>
</table>
<h3>Order Price:<span data-bind="text: price"></span></h3>

那般贰个宗旨的订单页面就好了,能够挑选数据,价格会自动更新:

图片 7

下边给订单增进增加和删除产品的法力,先给Order加上如下的章程:

复制代码 代码如下:

function Order() {
//……
self.remove = function (item) {
self.items.remove(item);
}

self.addMouse = function () {
self.items.push(new Item(products[2],1));
}
}

给表格加上一列删除按键

复制代码 代码如下:

<td><a href="#" data-bind="click: $root.remove">Remove</a></td>

再在报表尾部加上三个充实产品的开关:

复制代码 代码如下:

<button data-bind="click: addMouse">Add a Mouse</button>

那时候,observableArray的意义就反映了,当你点击删除开关只怕尾部的开关的时候,页面节点会跟着变动,而不必要手动更新DOM节点,那使得前端的JS大大简化。

图片 8

您或许感兴趣的篇章:

  • KnockoutJS 3.X API 第四章之数据调控流component绑定
  • KnockoutJS 3.X API 第四章之click绑定
  • KnockoutJS 3.X API 第四章之事件event绑定
  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API 第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合贯彻增加和删除改查功用【二】
  • BootstrapTable与KnockoutJS相结合贯彻增加和删除改查功用【一】
  • Bootstrap与KnockoutJs相结合贯彻分页效果实例详解
  • KnockoutJS 3.X API 第四章之数据调控流with绑定

本文由美高梅网址发布于计算机网络,转载请注明出处:Knockoutjs快速入门,visible绑定使用方法

上一篇:【美高梅网址】使用说明,父子窗口传值示例第 下一篇:Javascript数组排序各种方法总结,JavaScript实现拼音
猜你喜欢
热门排行
精彩图文