Як розділити спостережувані дані Knockout JS між компонентами інтерфейсу

Я розумію, як використовувати imports: {}таexports: {} поділяти властивості компонентів інтерфейсу, наприклад:

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

Що повертає назву компонента в експорті.

Але коли я намагаюся експортувати помітний нокаут, він завжди не визначений:

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

...

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

Як вирішення, я збираюся створити модель зберігання, як пояснено тут, але я вважаю за краще використовувати імпорт та експорт.

— Бен Крук
джерело

Значення об’єкта експорту повинні відповідати імені та властивості екземпляра UiComponent, відокремлених, наприклад, ':' checkout.cart.total:title.
Ім'я цільового експорту повинно містити компонент інтерфейсу "Простір імен".

У вашому прикладі ви встановлюєте значення для рядка, який відповідає властивості UiComponent, що є джерелом експорту. Експорт не визначений, коли ви його перевіряєте, оскільки це не є дійсною ціллю експорту.

Ось приклад, який працює:

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

    tracks: {
        shouldShowMessage: true
    },

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

Вищенаведене буде копіювати значення shouldShowMessageвластивості у властивість showMessageUiComponent з повним ім'ям foo.barкожного разу, коли значення змінюється.
Зверніть увагу, що це автоматично не зробить цільовий властивість і KO-кодируемым. Це потрібно оголосити явно, якщо зміни значення повинні викликати KO для повторного надання DOM-вузлів, які отримують доступ до цього властивості.

До речі, додавання shouldShowMessageдо tracksоб'єкта зробить його ko-es5 зрозумілим автоматично. Використання буквальних ko.observable()творів теж.

У наведеному вище прикладі, exportTargetі exportTargetPropertyналаштовані в defaults. Вони також можуть бути визначені як частина параметрів UiComponent в JSON, що зазвичай має більше сенсу, оскільки саме там визначається ієрархія UiComponent, включаючи імена UiComponent.

Нарешті, я хотів би зазначити, що я особисто вважаю, що ваше рішення з використанням об'єкта значення для передачі значення іншому компоненту інтерфейсу краще, ніж використання експорту чи імпорту. З мого досвіду, зберігання загального стану в DOM або UiComponents - це рецепт OOP для спагетті у всіх, крім найпростіших випадках.

— Вінай
джерело

Відмінне пояснення, дякую @Vinai! Я спробую, коли встигну, і відзначу це як прийняте, якщо воно працює.

— Бен Крук

У мене виникли деякі проблеми при використанні tracks, підписка на спостереження вручну більше не працює, this.shouldShowMessage.subscribe is not a functionколи використовується this.shouldShowMessage.subscribe(function() { ... }); Це добре працює, коли іншим способом встановлюється спостереження. Відчувається, ніби я пропускаю крок або tracksне створюю спостережуване так само.

— Бен Крук

Ви маєте рацію, властивості більше не є регулярними ко-спостережуваними, лише пари Getter / Setter ES5. Якщо ви хочете отримати доступ до вихідної спостерігається функції можна впорснути До і використанні ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(перший аргумент є ViewModel ( this), другого ім'я гусеничної власності Більш докладної інформації тут :. Github.com/SteveSanderson/knockout-es5

— Vinai

Ах, це має сенс, ти найкращий <3

— Бен Крук

Зігравшись з імпортом та експортом, і все ще не вдається, я погоджуюся, що це код спагетті, я відмовився і буду дотримуватися ручної підписки та моделі зберігання.

— Бен Крук