Knuckles

Appearance

Hints ​

What are hints? ​

Hints are similar to Virtual Elements, but provides build-time insights about the view, rather than runtime information. Hints are universal and is used by the tools in the Knuckles toolkit. Hints start with the "ok" namespace and end with "/ok", instead of "ko" used by Knockout.

html
<!-- ok ... -->
  ...
<!-- /ok -->

Implementations ​

The 'with' hint ​

The with hint allows you to define the data/type of the descendant binding context. Which is a fancy way of saying that the elements below the comment will recieve the provided view model.

html
<!-- ok with: ... -->
  ...
<!-- /ok -->

Scenarios ​

  • Type-checking a view: You need the typings for the view model. You have two options: either import a class that defines both the type and the data, or import only the types using type-only imports.

  • Server-side rendering a view: You need the actual runtime data of the view model. In this case, import the module that exports the actual data. If the types for the view model are defined in another module, you can wrap the decendants in an additional hint with a type-only import.

Importing ​

You can import a view model (or essentially anything) by specifying the identifier and module. This is not the same syntax as ESM.

Ex: default import
html
<!-- ok with: default from './viewmodel.js' -->
Ex: named import
html
<!-- ok with: myViewModel from './viewmodel.js' -->
Ex: namespace import
html
<!-- ok with: * from './viewmodel.js' -->

Type-only imports ​

You can also import only the type by prefixing the identifier with "type".

html
<!-- ok with: type SomeType from './viewmodel.js' -->

The 'ssr' hint ​

Used to enable or disable server-side rendering for the descendant bindings.

html
<!-- ok ssr: true -->
  ...
<!-- /ok -->