Sự khác nhau giữa loại trực tiếp Xem Models tuyên bố là dạng đối tượng vs chức năng

Question

Trong knock-out js Tôi thấy Xem Models khai báo là một trong hai:

var viewModel = { 
    firstname: ko.observable("Bob") 
}; 

ko.applyBindings(viewModel); 

hay:

var viewModel = function() { 
    this.firstname= ko.observable("Bob"); 
}; 

ko.applyBindings(new viewModel()); 

sự khác biệt giữa hai là gì, nếu có ?

Tôi đã tìm thấy this discussion trên nhóm nhạc knockoutjs google nhưng nó không thực sự mang lại cho tôi câu trả lời thỏa đáng.

tôi có thể thấy một lý do nếu tôi muốn khởi tạo mô hình với một số dữ liệu, ví dụ:

var viewModel = function(person) { 
    this.firstname= ko.observable(person.firstname); 
}; 

var person = ... ; 
ko.applyBindings(new viewModel(person)); 

Nhưng nếu tôi không làm điều đó thì nó có vấn đề mà phong cách tôi chọn?

Answer 1

Có một số lợi thế khi sử dụng chức năng để xác định kiểu xem của bạn.

Ưu điểm chính là bạn có quyền truy cập ngay vào giá trị this bằng với trường hợp được tạo. Điều này có nghĩa rằng bạn có thể làm:

var ViewModel = function(first, last) { 
    this.first = ko.observable(first); 
    this.last = ko.observable(last); 
    this.full = ko.computed(function() { 
    return this.first() + " " + this.last(); 
    }, this); 
}; 

Vì vậy, quan sát tính của bạn có thể bị ràng buộc để các giá trị thích hợp của this, thậm chí nếu gọi từ một phạm vi khác nhau.

Với một đối tượng theo nghĩa đen, bạn sẽ phải làm:

var viewModel = { 
    first: ko.observable("Bob"), 
    last: ko.observable("Smith"), 
}; 

viewModel.full = ko.computed(function() { 
    return this.first() + " " + this.last(); 
}, viewModel); 

Trong trường hợp đó, bạn có thể sử dụng viewModel trực tiếp trong quan sát được tính toán, nhưng nó không nhận được đánh giá ngay lập tức (theo mặc định), do đó bạn không thể xác định nó bên trong đối tượng theo nghĩa đen, như viewModel không được xác định cho đến sau khi đối tượng theo nghĩa đen đã đóng. Nhiều người không thích rằng việc tạo mô hình xem của bạn không được gói gọn thành một cuộc gọi.

Một mẫu khác mà bạn có thể sử dụng để đảm bảo rằng this luôn thích hợp là đặt biến trong hàm bằng giá trị thích hợp this và sử dụng nó thay thế. Đây sẽ là như sau:

var ViewModel = function() { 
    var self = this; 
    this.items = ko.observableArray(); 
    this.removeItem = function(item) { 
     self.items.remove(item); 
    } 
}; 

Bây giờ, nếu bạn đang ở trong phạm vi của một mục cá nhân và gọi $root.removeItem, giá trị của this sẽ thực sự được các dữ liệu bị ràng buộc ở cấp đó (đó sẽ là mục). Bằng cách sử dụng bản thân trong trường hợp này, bạn có thể đảm bảo rằng nó đang được xóa khỏi mô hình chế độ xem tổng thể.

Một tùy chọn khác đang sử dụng bind, được hỗ trợ bởi trình duyệt hiện đại và được KO thêm vào, nếu nó không được hỗ trợ. Trong trường hợp đó, nó sẽ trông giống như:

var ViewModel = function() { 
    this.items = ko.observableArray(); 
    this.removeItem = function(item) { 
     this.items.remove(item); 
    }.bind(this); 
}; 

Có nhiều hơn nữa có thể được nói về chủ đề này và nhiều mẫu mà bạn có thể khám phá (giống như kiểu mô-đun và mô hình mô-đun tiết lộ), nhưng về cơ bản cách sử dụng một chức năng cho phép bạn linh hoạt hơn và kiểm soát đối tượng được tạo ra và khả năng tham chiếu các biến riêng tư với cá thể đó.

Answer 2

tôi sử dụng một phương pháp khác nhau, mặc dù tương tự:

var viewModel = (function() { 
    var obj = {}; 
    obj.myVariable = ko.observable(); 
    obj.myComputed = ko.computed(function() { return "hello" + obj.myVariable() }); 

    ko.applyBindings(obj); 
    return obj; 
})(); 

Couple lý do:

1. Không sử dụng this, mà có thể nhầm lẫn khi sử dụng trong vòng ko.computed s vv
2. My ViewModel là một singleton, tôi không cần tạo nhiều phiên bản (ví dụ: new viewModel())