KnockoutJS 快速入門

2022-01-11 07:27:22 字數 2819 閱讀 3855

雖然在wpf中接觸過mvvm模式,可是剛開始在web中接觸到knockout.js讓我大吃一驚,簡化了好多任務作量,原來可能需要一大堆的js指令碼完成的工作量,被釋放許多。接觸knockoutjs一年多了,在好多個專案中也用到過,雖然每個專案中都有點重複造輪子的滋味,但是不得不說,越來越喜歡用ko完成前端的一些工作,雖然現在有許多流行的mvvm/mvc前端框架,如angular、vue、react等等,接觸過vue,簡單用過一次,接觸不深,不敢談論,也就帶過吧。工作之餘,開始總結自己在使用的工具、框架上用到的,體會到的感受。

先來看個最簡單ko所帶來的效果:

看看**是如何簡潔設計的:

1

<

div>

2<

label

>公司名稱

label

>

3<

input

type

="text"

data-bind

="value:unitname"

/><

br />

4<

label

>公司位址

label

>

5<

input

type

="text"

data-bind

="value:address"

/>

6<

p data-bind

="text:'您的公司名稱為:'+unitname()+',公司位址是:'+address()+' .'"

model-view-view model (mvvm) 是一種建立使用者介面的設計模式。 描述的是如何將複雜的ui使用者介面分成3個部分:

knockout有著三大核心功能:

對於模板,個人而言,用到的次數並不是很多,大多數時候前兩個功能就已經完全滿足業務需求了。

1
2、viewmodel物件內部,定義屬性或方法有許多種方式(我比較鍾意這種方式,有點鍵值對的感覺)。

其中的ko.observable()方法還有兩個兄弟,ko.observablearray()和ko.computed(),個人而言前兩種用的較多。

ko.observable()方法,將ui元素和viewmodel中的屬性進行雙向關聯,一方的改變影響著另一方,如上的例子中,在js中需要對unitname操作時有:

ko.observablearray()方法,繫結集合或陣列,通常以列表形式出現,對列表內的資料展示或增刪操作。監控陣列監控的是整個集合/陣列物件,內部的具體物件的監控不屬於它的職責範圍。

unittype:ko.observablearray(),//

在viewmodel中初始化乙個監控陣列

在js中如果某個業務需求需要增加或是刪除某個物件,利用集合的push('新值')或是remove(『舊值』)即可。

對於purecomputed方法,最優的使用還是利用它的重寫功能,我們通過write方法,可以實現許多功能,如拆分、提煉字串等等,具體業務,具體設計。

1     unitinfo: ko.purecomputed(function

() ),

4unitdetailinfo: ko.purecomputed(,

8 write: function

(value)

11 })

效果展示:

3、ui上用到的data-bind屬性

data-bind屬性雖然好用但它不是html的原生屬性,嚴格遵從html5語法屬於'data-'系家族常用來做自定義屬性。ko中命名data-bind來作為資料繫結的屬性,所有的操作都依靠data-bind屬性完成。

1

<

select

data-bind

="options:unittypeoptions, optionstext: 'text', optionsvalue: 'value', value:choiceunittypevalue"

>

select

>

雖然ko發布到現在也有六七年了,有點廉頗老矣的感覺,比不上新興之秀們,但是ko的功能仍然是優秀的,也不存在非常落後的地方。

ko具備的首要功能:

另外的優勢:

參考文章:@湯姆大叔 

2018-7-14,望技術有成後能回來看見自己的腳步

Knockoutjs環境搭建

最近要在專案中使用knockoutjs,因此今天就首先研究了一下knockoutjs的環境搭建,並進行了乙個簡單的測試。到這裡我們就已經可以編寫knockoutjs的 了,我們以列印 hello world 為例,編寫以下的 helloworld hello world 然後使用瀏覽器開啟此html...

knockoutjs簡單使用

knockoutjs是乙個不錯的前端mvvm框架,極大的減輕了前端工作開發量,增加前端 的維護性。主要特點 宣告式繫結 依賴跟蹤 模組開速開發。如下 官方 稍做修改 姓氏 text firstname 名字 text lastname 全名 text fullname 姓氏 text data bi...

KnockoutJS知識規整目錄

對於web開發來講,前端接觸是避免不了的,特別是對於中小公司,沒有嚴格的職位區分,前後端人員互相身兼是常有的事情,使用一些好的框架,能夠幫助我們快速開發並完成需要的功能,對於前端的js框架來講mvvm框架一直處於火熱狀態,現有名的三大巨頭,angular vue和react受眾多人喜愛並且也用於公司...