Search code examples
knockout.jsknockout-components

Knockout component binding syntax


Is there a custom-element equivalent syntax for the following?

<div data-bind="component: { name: 'day-of-week-utilization', params: DayOfWeekUtilization }"></div>

When I try the following, my object DayOfWeekUtilization isn't passed to my component. Instead an object with $raw property is passed in.

<day-of-week-utilization params="DayOfWeekUtilization"></day-of-week-utilization>

My object DayOfWeekUtilization has many varying properties, so I don't want to break out the properties within the HTML (needs to be driven by Javascript). The first syntax works but looks strange in my code because I use custom element syntax everywhere else.


Solution

  • The component binding and custom elements don't work the same way and can't always be substituted for each other. To answer your specific question, as of Knockout 3.4.0, you cannot use the syntax of passing a single params object from your viewmodel when using custom elements. There is an open issue regarding this feature, so maybe it'll be added in the future.

    It's probably possible to externally extend the binding provider to support this feature, but that's quite an advanced technique.