knockout.register
knockout.register helps to register component in a simpler and more powerful way.
;;; name: 'btn' props: text: type: kotypesString required: true type: kotypes mixin: eventMixin methods: { // 'trigger' mix from eventMixin this; } style template;
Usage
Install from NPM:
npm install knockout.register --save
Native Component Module
knockout.register named knockout original component module as Native Component Module.
Cite from knockout documentation:
kocomponents;
Standard Component Module
knockout.register creates a new component module and named it as Standard Component Module.
Options
name
- type:
String
(required)
The name for component and custom element.HTML elements are case-insensitive, so when using component the name need to use their kebab-case equivalents(eg. my-component
).
props
- type:
Object
(default:null
)
A prop is a custom attribute for passing information from parent components.A child component needs to explicity declare the props it expects to receive using this options.
name: 'child' props: text: kotypesString ;
Then we can pass a plain string to it like so:
It is possible for a component to specify requirements for the props it is receiving.If a requirement is not met, the plugin will emit warnings.
When a prop validation fails, the plugin will produce a console warning(if using the development build).
The validator can be a custom function, native constructors or combination:
props: // basic validator optionalString: kotypesString optionalNumber: kotypesNumber optionalBoolean: kotypesBoolean optionalFunction: kotypesFunction optionalObject: kotypesObject optionalArray: kotypesArray optionalDate: kotypesDate optionalRegexp: kotypesRegexp optionalNode: kotypesNode optionalElement: kotypesElement optionalAny: kotypesany optionalUser: kotypes optionalEnum: kotypes // basic validator with default optionalStringWithDefault: kotypesstring // default: '' optionalNumberWithDefault: kotypesnumber // default: 0 optionalBooleanWithDefault: kotypesboolean // default: false optionalObjectWithDefault: kotypesobject // default: {} optionalArrayWithDefault: kotypesarray // default: [] optionalFunctionWithDefault: kotypesfunction // default: noop optionalDateWithDefault: kotypesdate // default: new Date() optionalRegExpWithDefault: kotypesregexp // default: null optionalNodeWithDefault: kotypesnode // default: null optionalElementWithDefault: kotypeselement // default: null // combination validator optionalObjectWithShape: optionalString: kotypesString optionalNumber: kotypesNumber optionalBoolean: kotypesBoolean optionalArrayOfObjectsWithShape: kotypes optionalUnion: kotypes // custom validator if /* ... */ return true; // valid else return false // invalid // misc requiredString: type: kotypesString required: true stringWithDefaultValue: type: kotypesString default: 'default string' ;
computed
& pureComputed
Putting too much logic into your templates can make them bloated and hard to maintain.You should use a computed property.Why pure?
name: 'component' props: firstName: String lastName: String pureComputed: { return ` `; } ;
mixins
- type:
Array
(default:null
)
A mixin is a methods collection reused in multiply components.The merge stratege is dead simple just copy methods from a mixin to methods
option of target component.
It is possible for a mixin to do something before and after mixing.
// before mixing { this; // => this keyword refer to view model } // after mixing {} // the methods will be copied {} {} {};
methods
- type:
Object
(default:null
)
Built-in lifecycle and custom methods.The this
keyword refs to building view model in lifecycle methods and not enuse in custom methods.
methods: // vm created { thistext; // => '' thiscomponentInfoelement; // => null } // template compiled and inserted into DOM { thistext; // => '' thiscomponentInfoelement; // => element } // dispose component and clean up { this_computedObservable; this_domElement = null; this_timeoutHander = null; } // custom method { this; // => not ensure ref to view model all the time } ;
style
- type:
String
(default:''
)
A <style/>
tag which wraps the style string will be created and inserted to <head/>
.
template
- type:
String
(default:'<!-- empty template -->'
)
Knockout will emit error and halt application if template
not specified.This plugin will use a HTML comment string to cheat in registering.
License
MIT © BinRui.Guan