Cách chia sẻ các bản quan sát Knockout JS giữa các thành phần UI

Tôi hiểu cách sử dụng imports: {}vàexports: {} chia sẻ thuộc tính thành phần UI, chẳng hạn như:

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

Mà trả về tên thành phần trong xuất khẩu.

Nhưng khi tôi cố gắng xuất một Knockout có thể quan sát được thì nó luôn không được xác định:

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

Như một giải pháp thay thế, tôi sẽ tạo ra một mô hình lưu trữ như được giải thích ở đây nhưng tôi thích sử dụng hàng nhập khẩu và xuất khẩu.

— Ben Crook
nguồn

Các giá trị của đối tượng xuất khẩu phải phân giải thành tên và thuộc tính của một thể hiện UiComponent, được phân tách bằng dấu ':', chẳng hạn checkout.cart.total:title.
Tên mục tiêu xuất khẩu phải bao gồm "không gian tên" thành phần UI.

Trong ví dụ của bạn, bạn đặt giá trị thành một chuỗi, phân giải thành thuộc tính của UiComponent là nguồn xuất. Việc xuất không được xác định khi bạn kiểm tra nó vì đó không phải là mục tiêu xuất hợp lệ.

Đây là một ví dụ hoạt động:

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

Ở trên sẽ sao chép giá trị của shouldShowMessagetài sản vào thuộc tính showMessagecủa UiComponent với tên đầy đủ foo.barmỗi khi giá trị thay đổi.
Lưu ý rằng điều này sẽ không tự động làm cho thuộc tính mục tiêu trở thành KO có thể quan sát được. Điều đó phải được khai báo rõ ràng, nếu thay đổi giá trị sẽ kích hoạt KO để đăng ký lại các nút DOM truy cập thuộc tính đó.

Nhân tiện, thêm shouldShowMessagevào tracksđối tượng sẽ làm cho nó có thể quan sát tự động ko-es5. Sử dụng một ko.observable()tác phẩm theo nghĩa đen , quá.

Trong ví dụ trên, exportTargetvà exportTargetPropertyđược cấu hình trong defaults. Chúng cũng có thể được chỉ định là một phần của các tùy chọn UiComponent trong JSON, thường có ý nghĩa hơn, vì đó là nơi phân cấp UiComponent bao gồm các tên UiComponent được xác định.

Cuối cùng, tôi muốn lưu ý rằng cá nhân tôi nghĩ rằng giải pháp của bạn sử dụng một đối tượng giá trị để truyền giá trị cho thành phần UI khác tốt hơn là sử dụng xuất hoặc nhập. Theo kinh nghiệm của tôi, việc giữ trạng thái chia sẻ trong DOM hoặc trong UiComponents là một công thức cho spaghetti OOP trong tất cả các trường hợp trừ những trường hợp đơn giản nhất.

— Vinai
nguồn

Giải thích tuyệt vời, cảm ơn @Vinai! Tôi sẽ thử nó khi tôi có thời gian và đánh dấu nó là chấp nhận nếu nó hoạt động.

— Ben Crook

Tôi đã gặp phải một số vấn đề khi sử dụng tracks, đăng ký thủ công vào các vật quan sát không còn hoạt động this.shouldShowMessage.subscribe is not a functionkhi sử dụng this.shouldShowMessage.subscribe(function() { ... }); Nó hoạt động tốt khi cài đặt các thiết bị quan sát theo bất kỳ cách nào khác. Cảm thấy như thể tôi đang thiếu một bước hoặc trackskhông tạo ra một cách có thể quan sát theo cùng một cách.

— Ben Crook

Bạn nói đúng, các thuộc tính không còn quan sát được thường xuyên nữa, chỉ là các cặp getter / setter ES5. Nếu bạn muốn truy cập chức năng quan sát ban đầu, bạn có thể tiêm ko và sử dụng ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(đối số đầu tiên là viewmodel ( this), cái thứ hai là tên của thuộc tính được theo dõi. Thông tin thêm tại đây: github.com/SteveSanderson/knockout-es5

— Vinai

Ahh điều đó có ý nghĩa, bạn là người tốt nhất <3

— Ben Crook

Sau khi chơi xung quanh với hàng nhập khẩu và xuất khẩu mà vẫn thất bại, tôi đồng ý đây là mã spaghetti, tôi đã từ bỏ và tôi sẽ gắn bó với đăng ký thủ công và mô hình lưu trữ.

— Ben Crook