Knockout 3.2: can components / custom elements contain child content?
knockout.js,knockout-components
It's impossible in 3.2, however it would be possible in next version, see this commit and this test. For now to you have to pass parameters to component via params property Define your component to expect content parameter: ko.components.register('modal-dialog', { viewModel: function(params) { this.content = ko.observable(params && params.content || '');...
WHY does it initialize this Knockout.js component in random order?
javascript,html,knockout.js,knockout-components,knockout-templating
By default knockout components load asynchronously. In version 3.3 an option was added to allow the component to load synchronously. Add synchronous:true when registering to get the behavior you want. Example: ko.components.register("sidebar-step", { viewModel: function (params) { this.vm = params.vm; alert("break"); }, template: "<li data-bind='text: vm.message'>vm.onChangeElement</li>", synchronous: true }); ...
knockout component parameter handling
knockout.js,parameter-passing,knockout-components
You need viewModel with lists to bind, something like function MainViewModel() { this.list1 = [1, 2, 3]; this.list2 = ["test", "it", "work"]; } var viewModel = new MainViewModel(); ko.applyBindings(viewModel); Than you can bind params like <examlist params="list: list1"></examlist> <examlist params="list: list2"></examlist> or just pass array of values explicitly: <examlist params="list:...
Params with knockout component using instance
knockout.js,knockout-2.0,knockout-components
Returning a new instance depending on params contradicts the use of a shared instance viewmodel. This is exactly like using the viewmodel as constructor (accepting params) approach. If you want to create a single instance, modify its internals depending on params each time before the binding is applied, you can...
Knockout Components , the template has already been injected into this element, but isn't yet bound
javascript,knockout.js,knockout-3.0,knockout-components
So let's say the template for "my-component" is (regardless of how it's defined) <span class="foo" data-bind="text: 'foo'"></span> The sentence "the template has already been injected into this element, but isn't yet bound" describes the state of the DOM for a given component. (A.K.A. componentInfo.element in the context of the createViewModel...
Replace container element when using Knockout component
javascript,knockout.js,web-component,knockout-components,knockout-templating
I imagine the lack of this option could be defended as such, considering the nature of the library (there, I said it), and the developer's team philosophy: Knockout is a library and unlike other MVC's it does not force you to use a framework-defined way to structure your application. If...
How can I add HTML to this Knockout.js Viewmodel variable? [duplicate]
javascript,html,knockout.js,knockout-components,knockout-templating
You just need to use the html binding instead of the text binding: template: "<li data-bind='html: vm.message'>vm.onChangeElement</li>" Updated fiddle...
KnockoutJS custom component loader not executing `loadViewModel`
javascript,knockout.js,requirejs,knockout-components
If you don't "override" the loadComponent method then the default component loader's loadComponent will be invoked which only calls the loadViewModel if you've provided a viewModel config option. In your getConfig method you are returning a config with require which means that your require.js module has to provide the necessary...
Knockout Components Select Options
javascript,knockout.js,knockout-components
Quotes look messed up: template: 'Organizations: <select data-bind="options: organizationList, optionsText: "name", optionsValue: "id""></options>' // Here ------------------------------------^ but then ------------------------------^ ...and so the data-bind option actually just contains data-bind="options: organizationList, optionsText: " You need to escape those embedded quotes. Probably the easiest thing is to use escaped singles: template: 'Organizations: <select...
Call component function upon initialization in Knockout
javascript,knockout.js,knockout-components
Just an idea, pass a callback as a parameter for the component: HTML: <foo params="callback: callback"></foo> JS: function FooComponentViewModel(params) { this.Foo = function () { alert("bar"); }; params.callback(this); } var ViewModel = function () { this.callback = function(vm) { vm.Foo(); }; }; http://jsfiddle.net/r3d41q6c/3/...
$component incorrect within foreach binding inside a KO component
knockout.js,knockout-components
For some reason 'this' inside the remove method is not refferring to KVPairList. This is why i usually proffer to use a scoped variable to refer to the instance and prevent this closure issues: Try this: function KVPairList(params) { var self = this; self.add = function(){ self.items.push(new KV(this.k(), this.v())); };...
Knockout Components - Custom Component Loaders
knockout.js,knockout-components,systemjs
To provide your custom configuration handling logic you need to implement the loadComponent method as described in the documentation. However you need to watch out what you return from it, because according to the documentation: The template property has to contain an array of DOM nodes: so if your loader...
Alter the template from the `createViewModel` function within a custom component loader
javascript,knockout.js,knockout-components
I managed to create a working solution (although in its infancy). As I still don't know how to add template code to the componentInfo I discovered it is possible to edit the things available in the componentInfo. (See the solution below) ko.components.loaders.unshift({ getConfig: function (name, callback) { var component; callback({...