วิธีการแบ่งปันสิ่งที่น่าพิศวง JS สิ่งที่น่าสังเกตระหว่างองค์ประกอบ UI

ฉันเข้าใจวิธีใช้imports: {}และexports: {}แบ่งปันคุณสมบัติของส่วนประกอบ UI เช่น:

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

ซึ่งส่งคืนชื่อคอมโพเนนต์ในการเอ็กซ์พอร์ต

แต่เมื่อฉันพยายามส่งออกสิ่งที่น่าพิศวงที่สังเกตได้มันไม่ได้กำหนดไว้เสมอ:

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

...

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

เพื่อเป็นการหลีกเลี่ยงปัญหาฉันจะสร้างโมเดลหน่วยความจำตามที่อธิบายไว้ที่นี่แต่ฉันต้องการใช้การนำเข้าและส่งออก

ค่าของการส่งออกวัตถุต้องมีมติให้ชื่อและคุณสมบัติของอินสแตนซ์ UIComponent ที่คั่นด้วย ':' checkout.cart.total:titleยกตัวอย่างเช่น
ชื่อเป้าหมายการส่งออกจะต้องมีส่วนประกอบ "namespace" UI

ในตัวอย่างของคุณคุณตั้งค่าเป็นสตริงซึ่งแก้ไขเป็นคุณสมบัติของ UiComponent ที่เป็นแหล่งส่งออก การส่งออกไม่ได้ถูกกำหนดเมื่อคุณตรวจสอบเพราะนั่นไม่ใช่เป้าหมายการส่งออกที่ถูกต้อง

นี่คือตัวอย่างที่ใช้งานได้:

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

    tracks: {
        shouldShowMessage: true
    },

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

ด้านบนจะคัดลอกค่าของshouldShowMessageคุณสมบัติลงในคุณสมบัติshowMessageของ UiComponent ที่มีชื่อเต็มfoo.barทุกครั้งที่มีการเปลี่ยนแปลงค่า
โปรดทราบว่าสิ่งนี้จะไม่ทำให้คุณสมบัติเป้าหมายเป็นที่สังเกตได้โดยอัตโนมัติเช่นกัน สิ่งนั้นจะต้องมีการประกาศอย่างชัดเจนหากการเปลี่ยนแปลงค่าควรทำให้ KO ไปสู่โหนด DOM ที่แสดงผลอีกครั้งที่เข้าถึงคุณสมบัตินั้น

โดยวิธีการที่เพิ่มshouldShowMessageไปยังtracksวัตถุที่จะทำให้มันเป็นเกาะ-ES5 ที่สังเกตได้โดยอัตโนมัติ การใช้ko.observable()งานวรรณกรรมก็เช่นกัน

ในตัวอย่างข้างต้นexportTargetและมีการกำหนดค่าในexportTargetProperty defaultsพวกเขายังสามารถระบุได้ว่าเป็นส่วนหนึ่งของตัวเลือก UiComponent ใน JSON ซึ่งมักจะสมเหตุสมผลมากกว่าเนื่องจากเป็นที่ลำดับชั้นของ UiComponent รวมถึงชื่อ UiComponent ที่กำหนดไว้

ในที่สุดฉันต้องการทราบว่าฉันคิดว่าโซลูชันของคุณโดยใช้วัตถุค่าเพื่อส่งผ่านค่าไปยังองค์ประกอบ UI อื่น ๆ นั้นดีกว่าการใช้การส่งออกหรือนำเข้า จากประสบการณ์ของฉันที่รักษาสถานะที่ใช้ร่วมกันใน DOM หรือ UiComponents เป็นสูตรสำหรับปาเก็ตตี้ OOP ในทุกกรณียกเว้นกรณีที่ง่ายที่สุด