knockOutJs学习-1

1、

(1)view：html语言

声明ui的表现形式。

<p>first name: <input data-bind="text: firstName" /></p>

<p>last name: <input data-bind="text: lastName" /></p>

其中： text是input的属性，firstName和lastName是view model的属性。

data-bind:将dom与knockout属性进行绑定。

(2)view model：javascript

// 声明ui的数据和行为

function AppViewModel(){

        this.firstName = " good" ;

        this.lastName = "very" ;

}

// 激活knockout.js

ko.applyBindings(new AppViewModel());

基本工作做完，当在显示界面input中输入内容时，并没有发生绑定事件。

这是因为：

knockout.js中并没有进行观测值变化的检测，因此出现了概念：observables。它的工作就是用来观测并通知值发生了改变。

<p>first name 1: <input data-bind="text: firstName" /></p>

<p>last name 2: <input data-bind="text: lastName" /></p>

<p>first name 3: <span data-bind="text: firstName" ></span></p>

<p>last name 4: <span data-bind="text: lastName" ></span></p>

修改上面的view model ：

function  AppViewModel(){

this.firstName = ko.observable("good");

this.lastName = ko.observable("very");

}

ko.applyBindings(new AppViewModel());

run结果：

在1的input输入内容，在3的span中内容相应的及时更改，保持一致。

在2的input输入内容，在4的span中内容相应的及时更改，保持一致。

此时不管在function AppViewModel中的定义是good还是其他字符都无关了。只关心在ui中实际输入的值，响应dom绑定的knockoutjs的属性是否都是一样，都是firstName还是都是lastName，相同的就绑定。

即：定义firstName-knockoutjs的属性的字段，进行了绑定。一个更改其他相同属性的都发生响应。——可虑可与ajax及时更新相互类似。

1、进行字符串相加：

view model：

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

return this.firstName()+""+this.lastName();},this);

// this.firstName()带上括号。值。

view：

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

2、获取函数功能

eg:所有字符大写

view:

<p data-bind="click: capitalLastName">click this content</p>

view model:

function(){

..

..

this.capitalLastName = function(){

var currentValue = this.lastName();   // this.lastName() 括号不能忘记

this.lastName(currentValue.toUpperCase());

}

}

点击时，所有关联lastName属性的字段都大写了。