Knockout.js - инкапсулировать модели просмотра и скрывать их снаружи

Я следую подходу, предложенному в этом ответе, чтобы иметь дело с несколькими моделями просмотра и использовать их в разных частях моей страницы.

Некоторые модели просмотра будут использоваться в нескольких частях страницы и в разных элементах, поэтому я предпочитаю не использовать второе предлагаемое решение, которое рекомендует применение моделей представления к определенным элементам DOM.

Итак, у меня есть что-то вроде этого:

window.masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

ko.applyBindings(masterVM, $(':root').get(0));

Теперь в моем HTML я делаю такие вещи:

<div data-bind="click: masterVM.vmA.demo">Click</div>
<div data-bind="click: masterVM.vmC.demo">Click</div>

Это делает его доступным в объекте окна для всех, кто хочет выполнить эти методы, просто выполнив: window.masterVM.vmC.demo().

Есть ли способ скрыть это и инкапсулировать его таким образом, чтобы он был недоступен извне?


knockout.js knockout-3.0
person Alvaro    schedule 19.05.2020    source источник
comment
Напишите мне слово, если вы ищете что-то еще, кроме моего предложения.   -  person OfirD    schedule 24.05.2020

Ответы (2)


arrow_upward
1
arrow_downward

Не уверен, что это то, что вы ищете, но вы можете просто передать анонимный объект.

Например:

var VmA = function () { this.demo = _ => console.log('VmA'); }
var VmB = function () { this.demo = _ => console.log('VmB'); }
var VmC = function () { this.demo = _ => console.log('VmC'); }

ko.applyBindings({
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}, $(':root').get(0));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-bind="click: vmA.demo">ClickA</div>
<div data-bind="click: vmC.demo">ClickC</div>

person OfirD    schedule 21.05.2020

arrow_upward
1
arrow_downward

Объект masterVM ссылается на является вашей моделью представления. В контексте привязки у вас всегда будет доступ к корневой модели представления через контекст привязки $root.

Тогда ваши привязки могут быть:

<div data-bind="click: $root.vmA.demo">Click</div>
<div data-bind="click: $root.vmC.demo">Click</div>

Тогда вы могли бы просто избавиться от использования глобальных переменных.

person Jeff Mercado    schedule 22.05.2020