Làm quen với Ember JS (phần 2- Model, Template, Router)

Bài đăng này đã không được cập nhật trong 7 năm

Phần trước chúng ta đã làm quen với các khái niệm cơ bản của Ember JS. Trong phần này chúng ta cùng tìm hiểu kỹ hơn về Model, Template, Router...

Object Model

Phân tích hướng đối tượng và thiết kế kỹ thuật được gọi là object modeling (mô hình đối tượng) . Trong Ember.js, tất cả các đối tượng có nguồn gốc từ Ember.Object .

Classes và Instances

Class là một mẫu có tập hợp các biến và functions, trong khi các trường hợp có liên quan đến đối tượng của class đó. Bạn có thể tạo ra class Ember mới bằng cách sử dụng Ember.Object của extend () như ví dụ dưới đây:

App.NameOfClass = Ember.Object.extend ({
   VariableName1: 'name1',
   ..
   VariableName: 'name2',
   FunctionName: function (a)
   {
      // Logic hiển thị
   }
});

NameOfClass và FunctionName là tên của lớp và tên của hàm được định nghĩa trong class của bạn.

Chúng ta hãy xem làm thế nào để mở rộng các class con bằng cách sử dụng base class như dưới đây:

App.Student = Ember.Object.extend({
   disp: function() {
      var roll = this.get('rollnum');
      var name = this.get('name');
      document.write("Roll num: "+roll+" Name: "+name);
   }
});

App StudentInfo = App.Student.extend({
   rollnum:"12",
   name: "Jhon",
});

Trong đoạn code trên, tên của base class là Student và StudentInfo là class con, cái mà được kế thừa từ base class. disp là tên của function được khai báo trong base class, để hiển thị thông tin sinh viên. Bạn có thể sử dụng phương thức _super() để dùng được các phương thức của class cha.

Computed Properties, Observers and Bindings

Computed Properties cho phép khai báo functions và các thuộc tính. Các Ember.js tự động gọi các thuộc tính khi cần thiết và kết hợp một hoặc nhiều thuộc tính trong một biến.

App.Car = Ember.Object.extend({
   CarName: null,
   CarModel: null,

   fullDetails: function() {
      return this.get('CarName') + ' ' + this.get('CarModel');
   }.property('CarName', 'CarModel')
});

Trong đoạn code trên, fullDetails là một Computed Properties, trong đó property() để gọi ra CarName và CarModel. Bất cứ khi nào fullDetails được gọi, nó sẽ trả CarName và CarModel.

Observers update các đoạn text của computed property.

fullName: function() {
   var Name = this.get('Name');
   return Name;
}.property('Name'),

NameChanged: function() {
   this.set('Name','Jhon')
}.observes('fullName').on('init')

var person = App.Person.create({
   Name: 'Yudistra'
});

Trong đoạn code trên, hàm fullName có 1 biến là Name. Khi khởi tạo nó có giá trị là "Yudistra". NameChanged là một observer property, để hàm set biến Name có giá trị mới là "Jhon". Sau đó gán giá trị cho fullName

Bindings là một tính năng mạnh mẹ của Ember.js, để tạo liên kết giữa 2 thuộc tính. Nếu 1 trong 2 thuộc tính thay đổi thì cái còn lại cũng được tự động update theo. Bạn cũng có thể liên kết các đối tượng giống hoặc khác nhau.

CarBuyer = Ember.Object.create({
   TotalPrice: 860600
});

MarutiZen = Ember.Object.extend({
   TotalPrice: Ember.computed.alias('CarBuyer.TotalPrice')
});

zen = MarutiZen.create({
   CarBuyer: CarBuyer
});

Đoạn code trên mô tả sự ràng buộc giữa 2 thuộc tính CarBuyer và MarutiZen. Nếu MarutiZen được cập nhật, nó sẽ được phản ánh trong CarBuyer.

Template

Template được sử dụng để tạo layout tiêu chuẩn trên nhiều trang. Khi bạn thay đổi mẫu, các trang sử dụng mẫu này cũng được tự động thay đổi. Templates cung cấp điều khiển tiêu chuẩn hóa.

Application Template

Nếu bạn không xác định mẫu trong ứng dụng của bạn, Ember.js sẽ mặc định tạo một mẫu ứng dụng . Ember.js mẫu được đặt trong <script> . Bạn phải xác định ít nhất một vị trí: {{outlet}} để router điền các mẫu thích hợp.

<script type="text/x-handlebars">
   <div>
      {{outlet}}
   </div>
   <h2>{{App.name}}</h2>
</script>

Trong đoạn code trên, chúng ta sử dụng các handlebar template. Nó được khai báo bên trong thẻ script giúp hiển thị các thuộc tính name của ứng dụng.

Handlebars Basics

Ember.js sử dụng handlebar template để xây dựng UI. Nó là giống như HTML và cũng có khả năng nhúng các biểu thức. Các handlebar expression có một bộ điều khiển hiển thị các giá trị cập nhật của các thuộc tính.

<script type="text/x-handlebars">
   Hi, <h2>{{App.firstName}} {{App.lastName}}</h2>
</script>

Đoạn code trên hiển thị các giá trị của firstName và lastName.

Conditionals

Các Ember.js định nghĩa hai câu điều kiện, giúp kiểm soát chương trình. Đây là bắt đầu với # (Hash) . 2 kiểu câu điều kiện là: #if và #unless

Router

Đây là tính năng cốt lõi của EmberJs. Các bộ định tuyến được sử dụng để dịch URL vào loạt các mẫu và cũng thể hiện trạng thái của một ứng dụng. Các EmberJs sử dụng sự kiện Hashchange để biết sự thay đổi của route, điều này có thể được thực hiện bằng cách thực hiện đối tượng HashLocation .

Logging Route Changes

Là một ứng dụng phát triển phức tạp, ghi lại quá trình của router.

ENV.APP.LOG_TRANSITIONS = true;

Đoạn code trên chuyển các sự kiện chuyển đổi sang các sửa đổi.

Specifying a Root URL

Nếu EmberJs domain có nhiều ứng dụng web, Trong trường hợp đó bạn cần phải xác định các URL gốc để chỉ ra các routers.

Ember.Router.extend({
  rootURL: 'Path'
});

Đoạn code trên mô tả làm thế nào để xác định các URL gốc. Những 'Path' là đường dẫn URL gốc.

Defining Routes

Các router phù hợp với URL hiện tại với các routes đó là trách nhiệm hiển thị mẫu, tải dữ liệu và thiết lập application state. Bản đồ các phương thức router được sử dụng để định nghĩa các ánh xạ URL mà pass qua một chức năng mà có tham số như một đối tượng để tạo ra các toutes. Các {{link-to}} helper điều hướng các bộ định tuyến.

Router.map(function() {
  this.route('link-page', { path: '/PathTolinkpage' });
   this.route('link-page', { path: '/PathTolinkpage' });
});

Đoạn code trên mô tả làm thế nào để liên kết các trang khác nhau bằng cách sử dụng bản đồ router. Nó lấy tên linkpage và path như một tham số.

Generated Objects

Nếu bạn không xác định các đối tượng Route, Controller, View và Template classes Ember.js sẽ tự động tạo ra các đối tượng này vào ứng dụng của bạn.

Generated Routes

Các Ember.js sẽ tự động tạo ra các route nếu bạn không xác định trong ứng dụng của bạn.

Generated Controllers

Các Ember.js sẽ tự động tạo ra các controller cho các route thích hợp, nếu nó không được định nghĩa trong ứng dụng của bạn.

Generated Views and Templates

Các Ember.js sẽ tự động tạo ra view nếu bạn không xác định trong ứng dụng của bạn. Template không có gì ngoài outlet . Nếu bạn không khai báo outlet, Ember.js sẽ tự động tạo ra {{outlet}} trong mẫu.