logo

Thông báo

Icon
Error

Chia sẻ
Tùy chọn
Xem
Xem bài viết cuối
Offline admin  
#1 Đã gửi : 16/03/2015 lúc 06:30:03(UTC)
admin

Danh hiệu: Administration

Chức danh:

Nhóm: Administrators
Gia nhập: 23-07-2013(UTC)
Bài viết: 6,116
Man
Viet Nam
Đến từ: Vietnam

Cảm ơn: 10 lần
Được cảm ơn: 2 lần trong 2 bài viết

GIỚI THIỆU VỀ KNOCKOUT JS ( PHẦN 1)

Tổng quan về Knockout js

  • Giới thiệu chung
  • Mô hình của Knockout js(MVVM)
  • Hướng dẫn cài đặt
  • Observables trong Knockout js

Giới thiệu chung

Knockout(KO) là một thư viện của Javascript, nó giúp bạn tạo, hiển thị hay hiệu chỉnh User Interface(UI) với một data model được định nghĩa sẵn. Bất cứ khi nào bạn có phần thay đổi(thay đổi về action của user hay dữ liệu nội tại thay đổi) trong UI thì KO có thể giúp bạn thực hiện nó một cách đơn giản, và dễ kiểm soát

Các tính năng nổi bật của KO

  • Theo dõi tự động sự phụ thuộc trường này vào trường khác – Tự động cập nhật đúng phần giao diện khi có sự thay đổi phần tử đang được theo dõi.
  • Khai báo các ràng buộc với dữ liệu – một cách đơn giản để kết nối các phần trong UI đến với dữ liệu trong model của bạn.
  • Lập trình mở rộng – thực hiện các behavior tùy chọn cũng như việc khai báo ràng buộc mới cho việc tái sử dụng trong một vài dòng code.

Một số lợi ích khác:

  • Thư viện thuần Javascript – Làm việc tốt với nhiều server hoặc.
  • Làm việc tốt với nhiều trình duyệt – (IE 6+, Firefox 2+, Chrome, Safari, …).
  • Thích ứng tốt – Có thể dễ dàng xác định được các chức năng của nó trên các trình duyệt và các nền tảng mới.

Mô hình của knockout js

Developers thường quen với mô hình MVC rất điển hình trong các framework điển hình của quá trình phát triển ứng dụng web. Tuy nhiên KO sử dụng mô hình MVVM (Model-View-ViewModel), nó là một biến thể của MVC. Mô hình MVVM gồm 3 phần chính là: Model, View, ViewModel. View và Model có chức năng vai trò như trong mô hình MVC. ViewModel trong MVVM như là một controller đặc biệt, nó cung cấp các hoạt động, logic cần thiết để view có thể lấy được dữ liệu thuận tiện. ViewModel được coi là một view trừu tượng, nó chứa trạng thái và các bihavior của view. Tuy nhiên ViewModel không chứa các tham chiếu đến thành phần của UI và không biết gì về các thành phần nhìn thấy của View. Do đó có sự tách biệt rõ ràng giữa View và ViewModel. Hay nói một cách khác là View layer là sự ánh xạ của ViewModel

Mô hình MVVM được mô tả đơn giản như sau:

Mvvm-architecture.png

Cụ thể tất cả các quá trình diễn ra qua các bước sau:

SmallTalk MVVM HELLO FLOW.png
  1. Mỗi user nhấn vào một nút trên màn hình (thực hiện một action).
  2. Một sự kiện bắn ra chất kết dính (binder).
  3. Chất kết dính tìm action logic tương ứng trong ViewModel và thực thi nó.
  4. Action logic đó truy cập dữ liệu trong Model layer và cập nhật tính năng tương ứng của ViewModel đó.
  5. ViewModel thông báo cho binder đó một vài tính năng đã được thay đổi.
  6. Các tính năng vừa được cập nhật là nhờ việc tải dữ liệu từ binder trong ViewModel.
  7. Binder sau đó cập nhật các thành phần UI tương ứng để cung cấp các phản hồi trực quan cho user.

Hướng dẫn cài đặt

Trước tiên cài Bower package

sudo npm install -g bower

bower install knockout

Để sử dụng đơn giản chỉ cần nhúng vào thẻ ở một nơi nào đó trong code HTML. Ví dụ như sau

<script type='text/javascript' src='knockout-3.2.0.js'></script>

Observables

Tạo view models với observables

Như vậy về cơ bản, knockout js là một mô hình thiết kế cho việc xây dựng giao diện người dùng một cách đơn giản mà rất dễ dàng cho việc chỉnh sửa, cập nhật dữ liệu ngay trên view. Để tạo một view model với KO, bạn cần phải khai báo một JavaScript Object. Ví dụ (sử dụng framework laravel 4x):

Kết quả output sẽ như sau:

Trong view rõ ràng ta thấy rằng thuộc tính data-bind không có trong HTML, nó chính là thuộc tính của KO, chính vì HTML không hiểu được nó nên bạn cần phải active nó trong <script>

ko.applyBindings(myViewModel);

Tuy nhiên, đó mới chỉ là việc làm thế nào để bạn create một view model cơ bản và hiển thị chúng bằng cách dùng binding, lợi ích lớn nhất của KO là tự động cập nhật UI khi view model thay đổi. Và làm thế nào mà KO có thể biết phần view model của bạn thay đổi. Câu trả lời là bạn cần phải khai báo các thuộc tính của model bằng observabels, bởi vì chỉ có Javascript object mới thông báo được cho người theo dõi biết về những thay đổi đó, và có thể tự động tìm thấy sự phụ thuộc

Làm việc với observables arrays

Nếu bạn muốn phát hiện và phản hồi lại những thay đổi của một object, thì bạn dùng observables. Còn nếu bạn muốn phát hiện và phản hồi lại những thay đổi của tập hợp nhiều thứ thì bạn dùngobservableArray, nó được sử dụng khá phổ biến trong KO.

Thường thì khi put một object trong một observableArray thì sẽ không tạo được toàn bộ các thuộc tính cho bản thân mỗi một observable. Tất nhiên là bạn hoàn toàn có thể tạo ra nhiều thuộc tính cho observable mà bạn mong muốn

Nếu bạn muốn mảng observable khởi tạo bằng rỗng, thì bạn khởi tạo nó theo cấu trúc như sau:

// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
    { name:"Bungle", type:"Bear" },
    { name:"George", type:"Hippo" },
    { name:"Zippy", type:"Unknown" }
]);

Để truy vấn đến giá trị của observableArray bạn có thể gọi giá trị nó như một array trong Javascript. Ví dụ như sau:

alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);

Tuy nhiên observableArray có nhiều tiện ích hơn so với native JavaScript array, bởi vì:

  1. Làm việc tốt trên mọi trình duyệt. (Ví dụ, hàm của native JavaScript indexOf không làm việc được với IE 8 trở về trước tuy nhiên KO’s indexOf làm việc được tốt)
  2. Hàm thay đổi nội dung của một array như push và splice, phương thức của KO thì tự động trigger tất cả sự kiện trên UI và qua xử lý sẽ tự động cập nhật lại UI.
  3. Cú pháp của KO có rất nhiều convenient. Để gọi phương thức push của KO, viết myObservableArray.push(...). Đây là cách hay hơn 1 chút so với việc gọi ẩn array push method với việc viết myObservableArray().push(...).

Các thao tác với observableArray

  • myObservableArray.push('Some new value') Thêm một item mới vào cuối array
  • myObservableArray.pop() xóa bỏ giá trị cuối cùng của array và return nó
  • myObservableArray.unshift('Some new value') inserts một new item ở vị trí đầu tiên của array
  • myObservableArray.shift() xóa bỏ giá trị đầu tiên của array và returns nó
  • myObservableArray.reverse() đảo thứ tự của array
  • myObservableArray.sort() sắp xếp nội dung của array.
    • mặc định là sắp xếp theo alphabetical, tuy nhiên bạn có thể thêm vào các tùy chọn để sắp xếp. Ví dụ, để sắp xếp một mảng ‘person’ objects theo last name, bạn có thể viết như sau myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })
  • myObservableArray.splice() xóa và return lại số của thành phần bắt đầu từ vị trí đánh index. Ví dụ, myObservableArray.splice(1, 3) xóa 3 thành phần bắt đầu từ vị trí index số 1 (tức là xóa thành phần 2, 3, 4) and và return chúng là một mảng.

Một số tiện ích khác mà Javascript array không có như sau:

  • myObservableArray.remove(someItem) xóa toàn bộ giá trị bằng với someItem and returns chúng về một array
  • myObservableArray.remove(function(item) { return item.age < 18 }) xóa toàn bộ giá trị củaage mà nhỏ hơn 18, và returns chúng là một array
  • myObservableArray.removeAll(['Chad', 132, undefined]) xóa toàn bộ giá trị 'Chad', 123, or undefined và returns chúng là một array
  • myObservableArray.removeAll() xóa toàn bộ giá trị và returns chúng là một array

Tài liệu tham khảo

Bạn có thể xem trên trang chủ tại Knockout js

Ai đang xem chủ đề này?
OceanSpiders 2.0
Chủ đề tương tự
CHƯƠNG 1 - GIỚI THIỆU VỀ KỲ THI PMP (PMP)
Bởi admin 31-07-2019 lúc 10:50:00(UTC)
Dịch vụ tìm kiếm và giới thiệu nhân sự chất lượng cao (Mô hình dịch vụ)
Bởi admin 14-12-2018 lúc 02:49:56(UTC)
Những sai sót khi viết thư giới thiệu xin học bổng (Kỹ năng giao tiếp)
Bởi Ellry 20-07-2018 lúc 08:54:48(UTC)
Giới thiệu Data Warehouse (Giải pháp cho doanh nghiệp)
Bởi admin 26-07-2017 lúc 10:58:10(UTC)
Giới thiệu về EntityFramework Code First (Entity Framework)
Bởi admin 04-10-2016 lúc 11:25:57(UTC)
Giới thiệu cho bạn danh sách nhà hàng có ưu điểm nhất định, phù hợp với yêu cầu nhất định (Thế giới ẩm thực)
Bởi nga 19-08-2016 lúc 11:24:10(UTC)
Giới thiệu tới bạn 6 nhà hàng được đánh giá cao (Thế giới ẩm thực)
Bởi lã thanh yên 11-07-2016 lúc 03:39:58(UTC)
Thư giới thiệu (Truyện cười công sở)
Bởi admin 26-06-2016 lúc 02:57:17(UTC)
Burger King giới thiệu bánh burger đen đặc biệt (Dịch vụ ăn uống)
Bởi rssrk1110 09-11-2015 lúc 02:27:13(UTC)
Giới thiệu về thương hiệu cà phê Passion (Thức Uống)
Bởi Dieu 07-11-2015 lúc 12:25:29(UTC)
Introduce (Tự giới thiệu) (Học tiếng anh theo sơ đồ tư duy)
Bởi thuyvan 21-06-2015 lúc 09:04:13(UTC)
Giới thiệu Windows Azure (Lập trình với Window Azure)
Bởi admin 17-06-2015 lúc 08:57:48(UTC)
Giới thiệu serie VPS căn bản (VPS)
Bởi admin 18-03-2015 lúc 05:00:03(UTC)
Giới thiệu về Ruby, Ruby on Rails - Introduction of Ruby, Ruby on Rails (Ruby)
Bởi admin 17-03-2015 lúc 09:54:00(UTC)
GIỚI THIỆU VỀ CƠ SỞ DỮ LIỆU NOSQL (NoSQL)
Bởi admin 16-03-2015 lúc 06:47:56(UTC)
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET 2.2.4.14 | YAF.NET © 2003-2020, Yet Another Forum.NET
Thời gian xử lý trang này hết 0.998 giây.