I must be missing something very simple, but I'm not seeing it.
I had a simple viewmodel:
var ViewModel = function() {
var self = this;
self.categories = ko.observableArray([{id:'one',display:'ONE'},{id:'two',display:'TWO'}]);
self.show_subcategories_for = function(category){
alert(category.id);
};
};
ko.applyBindings(ViewModel);
and html for it:
<div id="categories">
<!-- ko foreach: categories -->
<input type="radio" data-bind="attr: { id: id }, click: show_subcategories_for" name="category" />
<label data-bind="attr: { 'for': id }, text: display"></label>
<!-- /ko -->
</div>
working jsfiddle for it: http://jsfiddle.net/J8VNY/2/
Then I was trying to factor out categories array and wanted to pass it to the view model as a parameter, knockout would error out on "show_subcategories_for is not defined ", which is definitely there.
I changed the viewmodel to following:
var ViewModel = function(cats) {
var self = this;
self.categories = ko.observableArray(cats);
self.show_subcategories_for = function(category){
alert(category.id);
};
};
ko.applyBindings(new ViewModel(
[{id:'one',display:'ONE'},{id:'two',display:'TWO'}]
));
here is jsfiddle with the error: http://jsfiddle.net/J8VNY/1/
Everything appears to be correct yet for some reason instantiating viewmodel and passing it an array as a parameter causes knockout some confusion.
Any insight would be appreciated. Thank you
You have to use the $root keyword:
<input type="radio"
name="category"
data-bind="attr: { id: id }, click: $root.show_subcategories_for" />
See Documentation
Related
I am new to KnockoutJS.
I have an app that works in a following way:
when page is loaded a complex data structure is passed to frontend
this datastructure is splitted into smaller chunks and these chunks of data are passed to components
user interacts with components to edit chunks of data
upon clicking a button updated complex data structure should be passed to backend
I have troubles with a fourth step. I've been reading throught documentation and yet I couldn't figure out how I am supposed to get updated data.
Here is a JSFiddle: https://jsfiddle.net/vrggyf45
Here is the same code in snippet. See the bottom of the question for what I've tried.
ko.components.register('firstComponent', {
viewModel: function(params) {
var self = this;
self.firstComponentValue = ko.observable(params.firstComponentValue);
},
template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: firstComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});
ko.components.register('secondComponent', {
viewModel: function(params) {
var self = this;
self.secondComponentValue = ko.observable(params.secondComponentValue);
},
template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: secondComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});
var json = '{"items":[{"componentName":"firstComponent","firstComponentValue":"somevalue"},{"componentName":"secondComponent","secondComponentValue":"someothervalue"}]}';
var data = JSON.parse(json);
var mainVM = {};
mainVM.items = ko.observableArray(
ko.utils.arrayMap(data.items,
function(item) {
return ko.observable(item);
}));
ko.applyBindings(mainVM);
$('input[type=button]').click(function() {
var updatedData = ko.dataFor(document.getElementById('main'));
//get updated json somehow?
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
<div data-bind="foreach: {data: items, as: 'item'}">
<hr>
<div data-bind="component: {name:componentName, params: item}">
</div>
</div>
<hr>
<input type="button" value="post data">
</div>
If I had a single view model I could have just used ko.dataFor($("#rootElement")) and send it to backend. However I intend to use components and they have their own viewmodels, which are not connected to the root viewmodel. I could have find them all with jQuery and use ko.dataFor but it looks like a big hack to me.
I also could have define all the viewmodels, including the components in the main viewmodel, but it makes components kind of useless.
Also I tried to change components viewmodels constructors so they would mutate input data and override incomming values with observables, but it seems like a hack to me as well.
Is there a function like ko.components or something that could give me all living viewmodels?
You can pass observables to the components so that their edits are immediately reflected in the parent object. ko.mapping is handy for converting plain JS objects to observables. Then when you want the data back, ko.toJS() it.
ko.components.register('firstComponent', {
viewModel: function(params) {
var self = this;
self.firstComponentValue = params.firstComponentValue;
},
template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: firstComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});
ko.components.register('secondComponent', {
viewModel: function(params) {
var self = this;
self.secondComponentValue = params.secondComponentValue;
},
template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: secondComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});
var json = '{"items":[{"componentName":"firstComponent","firstComponentValue":"somevalue"},{"componentName":"secondComponent","secondComponentValue":"someothervalue"}]}';
var data = JSON.parse(json);
var mainVM = {};
mainVM.items = ko.mapping.fromJS(data.items);
ko.applyBindings(mainVM);
$('input[type=button]').click(function() {
var updatedData = ko.toJS(ko.dataFor(document.getElementById('main')));
//Or, more simply: updatedData = ko.toJS(mainVM);
console.log(updatedData);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
<div data-bind="foreach: {data: items, as: 'item'}">
<hr>
<div data-bind="component: {name:componentName, params: item}">
</div>
</div>
<hr>
<input type="button" value="post data">
</div>
I have a list as follows:
<ul id="blogList" data-bind="foreach: Data">
<li>
<span data-bind="text: Title"> </span>
View
</li>
</ul>
And knockout view model as below:
var ViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
this.currentSelected = ko.observable();
self.viewEntry = function () {
currentSelected = this;
}
};
Setting the currentSelected to this doesn't seem to work because when I try to bind to currentSelected somewhere else I get nothing happening:
<h2 data-bind="text: currentSelected.Title"></h2>
Is that the correct way to bind to currentSelected? The list is working fine but setting the currentSelected and binding to it isn't working.
First let's have a look at your viewEntry method.
self.viewEntry = function () {
currentSelected = this;
}
currentSelected is undefined it should be self.currentSelected additionally since this is an observable you should not set this as var with equal sign but rather treat this as function so it should be self.currentSelected(this)
the other thing is binding inside this part:
<h2 data-bind="text: currentSelected.Title"></h2>
again this is an object so to access its properties you need to use currentSelected as function so it should be
<h2 data-bind="text: currentSelected().Title"></h2>
Here you can find a working sample: https://jsfiddle.net/jz9t5vbo/
im trying to databind a observable that has a single json object. I can do this with a ko.observablearray no problem with the foreach but not sure how to do it with a observale
this is my view model
var ViewModel = function () {
var self = this;
self.job = ko.observable();
}
self.job is has been populated with a json object from a api call and this works ok but im not sure how to databind to the html. i tried the foreach
<p data-bind="foreach: job">
Name: <span data-bind="text: jobslist.Name"> </span>
Description: <span data-bind="text: jobslist.Description"> </span>
</p>
It doesn't give any error just blank
{
"JobID":1,
"JobsListID":1,
"BookingID":2,
"TimeAllowed":20,
"TimeTaken":22,
"Comments":"Some comments",
"Status":"complete",
"Notes":null,
"TimeStarted":"2014-11-04T09:00:00",
"Difficulty":1,
"CompleteDate":"2014-11-04T09:22:00",
"booking":null,
"jobs_mechanics":[],
"jobslist": {
"JobsListID":1,
"JobCategoryID":1,
"Description":"Change Tyres ",
"Name":"Tyres",
"jobs":[],
"jobscategory":null,
"model_jobslist":[]
},
"timessheets":[]
}
You should be able to get the results using with binding. Here is the code assuming you use local variable instead of web service call:
var data = {
"JobID":1,
"JobsListID":1,
"BookingID":2,
"TimeAllowed":20,
"TimeTaken":22,
"Comments":"Some comments",
"Status":"complete",
"Notes":null,
"TimeStarted":"2014-11-04T09:00:00",
"Difficulty":1,
"CompleteDate":"2014-11-04T09:22:00",
"booking":null,
"jobs_mechanics":[],
"jobslist": {
"JobsListID":1,
"JobCategoryID":1,
"Description":"Change Tyres ",
"Name":"Tyres",
"jobs":[],
"jobscategory":null,
"model_jobslist":[]
},
"timessheets":[]
};
var ViewModel = function () {
var self = this;
self.job = ko.observable(data);
}
var vm = new ViewModel();
ko.applyBindings(vm);
And HTML:
<p data-bind="with: job().jobslist">
Name: <span data-bind="text: Name"> </span>
Description: <span data-bind="text: Description"> </span>
</p>
Here is a jsFiddle
I am trying to add a "default" object to my Knockout observableArray. The way my code stands currently, I end up adding the exact same object to the array instead of a new instance of the object. I tried using jQuery's .extend(), but, that didn't work out so I am looking for input.
Here is a demonstration to show my problem: http://jsfiddle.net/2c8Fx/
HTML:
<div data-bind="foreach: People">
<input type="text" data-bind="value: Name" />
</div>
<button type="button" data-bind="click: AddPerson">Add Person</button>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
Script:
function ViewModel() {
var self = this;
self.EmptyPerson = ko.mapping.fromJS({Name: null, Age: null});
self.People = ko.observableArray([self.EmptyPerson]);
self.AddPerson = function() {
self.People.push(self.EmptyPerson);
};
}
ko.applyBindings(new ViewModel());
This doesn't work because the observableArray is actually holding a reference to the same object for each index.
What's the best way to create a new instance of my Knockout object?
function ViewModel() {
var self = this;
self.People = ko.observableArray();
self.AddPerson = function() {
self.People.push(ko.mapping.fromJS({Name: null, Age: null}));
};
}
ko.applyBindings(new ViewModel());
I did this and it works like you think it would. I hope this helps.
Check out a working example here
I want to make observable object of observables. For example:
var Project = function(id, name, custId) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.custId = ko.observable(custId);
}
var viewModel = function() {
this.newUpProj = ko.observable(new Project(null,null,null));
...
}
Something like this... I want newUpProject to be observable and it's properties to be observables. I also tried this.newUpProj = ko.mapping.fromJS(new Project());
Edit1: It crates the object but it's properties(id, name...) are not observables...
Edit2: Use in html:
<div class="modal-body">
<p><input type="text" id="projNameTx" data-bind="value: newUpProj.name()" /></p><br>
<p><select data-bind="options: customers, optionsCaption: 'Choose...', value: newUpProj.custId(), optionsText: 'name', optionsValue: 'id'"
size="1"></select></p>
</div>
<div class="modal-footer">
<button class="btn" data-bind="click: clearModal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-bind="click: updateFlag() ? updateProject : addProject, enable: newUpProj.custId() && newUpProj.name()">Save</button>
</div>
Correct values are loaded in the input and the select but the Save button never disables if the input is empty(for example), because the change don't go to the model.
Possibly just needing to execute your newUpProj in you binding?
enable: newUpProj().custId() && newUpProj().name()
Failing that, you could try making a computed observable which is set to either true or false depending on the state of custId and name
Managed to do it with this:
http://jsfiddle.net/wF7xY/1/
var Model = function() {
this.data = ko.observable({}); // It doesn't work
};
var Data = {
field1: 'test1',
field2: 'test2'
};
var model = new Model();
ko.applyBindings(model);
ko.mapping.fromJS(Data, {}, model.data);
model.data.valueHasMutated();
HTML:
<div data-bind="text: data().field1 ? data().field1() : ''"></div>
Thanks for the help.