Knockout components within foreach and templates
So, with the introduction of components and custom elements, it seems much easier to encapsulate your logic and markup, however I'm a little unsure how to use components in foreach sections when you need to go through in view mode.
So my current scenario is that I have a view model that looks something like this:
function SomePartialViewModel()
{
this.Name = ko.observable();
this.Score = ko.observable();
this.SomeDate = ko.observable();
}
function SomeViewModel()
{
this.DataFromWebServiceCall = ko.observableArray();
this.GetDataFromServer = function(){
// get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
}
}
Now in the above we have a POJO to hold the partial data and we have a main view model for the view that will contact the web service or whatever and populate its array with instances of the partial. Then it will currently be used like this:
<div id="partial-data" data-bind="template: { name: 'partial-view', foreach: DataFromWebServiceCall }"></div>
<div class="partial-view">
<label data-bind="text: Name"></label>
<label data-bind="text: Score"></label>
<label data-bind="text: SomeDate"></label>
</div>
Now let's say what .partial-view
is in a script tag with the correct template name, etc. and is the correct template, then #partial-data
is in the main view and wants to display all instances on the page. Everything is currently working, but I would like to move to a more component based model and currently we can see that the template is using SomePartialViewModel data, so we have our template and our view model for this component, however the problem is around getting viewmodel to the component, since you are currently registering the component during setup, then you use params to populate chunks of it. However, in this case, I want to pass to the viewmodel to the component during binding ...
So I was wondering how I can do this as I think I could register the component with the template, but not with the viewmodel, but is there any point in the style binding data
where I can set a $data
property and move to foreach from the template binding to the presentation?
Hopefully the problem I am trying to solve can be seen and any information will be great.
source to share
There are many ways to pass values and / or view modes for components using params
.
If you are using a method createViewModel
, you can simply pass to the viewmodel using parameters and use the partial view model as the component's view model:
ko.components.register("partial-view", {
viewModel: {
createViewModel: function (params) {
return params.value;
}
},
template: "<div>Partial View for <b data-bind='text: Name'></b></div>"
});
You can see a working example in this fiddle: http://jsfiddle.net/Quango/fn1ymf9w/
source to share
You can define viewModels under viewModels :)
just like defining an observable, you can define another viewModel and use the "c" binding, you can create the component based model you want.
First, you create your components and sub-components and sub-sub-components, etc. viewModels separately.
var SomePartialViewModel = function()
{
this.Name = ko.observable();
this.Score = ko.observable();
this.SomeDate = ko.observable();
}
var SomeViewModel = function()
{
this.DataFromWebServiceCall = ko.observableArray();
this.GetDataFromServer = function(){
// get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
}
this.SPM = new SomePartialViewModel(); // partial-1
}
And then you create a MainViewModel and link all the main items here.
var MainViewModel = function() {
var self = this;
self.SVM = new SomeViewModel();
self.SPM = new SomePartialViewModel(); // partial-2
}
ko.applyBindings(new MainViewModel());
then in your html you can create your components obeying the context created on knockout entities
...
<body>
<div data-bind="with: SVM">
....
<div data-bind="with: SPM">
<!-- partial-1 data -->
</div>
...
</div>
<div data-bind="with: SPM">
<!-- partial-2 data -->
</div>
</body>
...
You might want to create separate files for your component models and with a modular script loader like Require js that you can bundle together with a complete component based web application
source to share