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.
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 the below structure for knockout model. It contains an observable array which in turn contains an object.
function ViewModel() {
var self = this;
self.newItem = ko.observable({
manufacturer: ko.observable(),
itemnumber: ko.observable(),
itemDescription: ko.observable()
});
self.AllItems = ko.observableArray();
self.addItem = function() {
self.newItem().manufacturer("test");
self.newItem().itemDescription("data");
self.AllItems.push(self.newItem);
};
self.removeItem = function(data) {
self.AllItems.remove(data);
};
}
First issue:Through this script I am entering a new itemnumber in the textbox and then clicking on add item to have the new item with the itemnumber from the textbox added to the observable array but when I change the item number and hit add it changes all the itemnumber inside the array. How can i have unique data inside the array.
Second issue: I need to remove the specific items from the array but it's not deleting it. Can someone please tell me how I can delete items from the observable array based on say the itemnumber property.
<input type="text" data-bind="value: newItem().itemnumber"/>
<div>
Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
<table>
<tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody>
</table>
</div>
<script type="text/html" id="itemTemplate">
<tr>
<td>
<input data-bind="value: itemnumber" />
Remove Item
</td>
</tr>
</script>
I have created this fiddle for quick view of the issue. Just started learning knockout so any help is appreciated.
http://jsfiddle.net/N3JaW/138/
Try the following for adding new item, which will solve your first issue:-
HTML code
<input type="text" id="textBox" data-bind="value : textBoxVal"/>
<div>
Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
<table>
<tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody>
</table>
</div>
<script type="text/html" id="itemTemplate">
<tr>
<td>
<input data-bind="value: itemnumber" />
Remove Item
</td>
</tr>
</script>
JS code:-
function ViewModel() {
var self = this;
self.newItem = ko.observable({
manufacturer: "",
itemnumber: "",
itemDescription: ""
});
self.textBoxVal = ko.observable();
self.AllItems = ko.observableArray();
self.addItem = function() {
self.newItem().manufacturer= "test";
self.newItem().itemDescription= "data";
self.newItem().itemnumber = self.textBoxVal();
self.AllItems.push(self.newItem);
};
self.removeItem = function(data) {
self.AllItems.remove(data);
};
}
$(document).ready(function() {ko.applyBindings(new ViewModel()); });
Your first issue was because, each time you are trying to add a new item, you were changing the value of itemNumber, which is an observable.
Observable value will be changed every where it is binded, when it's value is changed.
Instead you need to create new object and do push into the observableArray.
Refer doc to know more about observableArray.
For your second problem change removeItem as given below:-
self.removeItem = function(data) {
var dtIndex = self.AllItems.indexOf(data); //Get the index of the object you want to remove.
self.AllItems.splice(dtIndex, 1); //Then do splice
};
You can refer the above doc, to know how to use splice.
EDIT based on the suggestion in the comment :-
For working code of edited answer click here.
Hope this will solve your problem.
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
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
Note: This is not a question about ObservableArrays.
Let's say I have the following viewmodel:
var viewmodel = {
arrayOfBooleans: [
ko.observable(false),
ko.observable(false),
ko.observable(false)
]
}
And a view like so:
<div data-bind="foreach: arrayOfBooleans">
<button data-bind="click: ????">Set to true</button>
</div>
What can I do inside the foreach to get the <button> to set the observable to true when clicked? Using data-bind="click: someFunction", the first argument someFunction gets is the unwrapped values of observables in the array (not the observables themselves), and seemingly no way to get back at the observables or to pass custom arguments.
Hope it will give some idea .
var viewmodel = {
var self = this;
self.arrayOfBooleans = ko.observableArray([]);
self.arrayOfBooleans.push(new _newBoolean());
self.arrayOfBooleans.push(new _newBoolean());
self.arrayOfBooleans.push(new _newBoolean());
function _newBoolean() {
self.one = ko.observable(false);
}
self.setToTrue = function(index){
self.arrayOfBooleans()[index].one(true);
};
}
If you want it as button
<div data-bind="foreach: arrayOfBooleans">
<button data-bind="click: $root.setToTrue($parent.arrayOfBooleans.indexOf($data))">
Set to true
</button>
<input type=hidden data-bind="value:one" />
</div>
If you want it as radio button than it is much more simple
<div data-bind="foreach: arrayOfBooleans">
<span>Set To True</span><input type=radio data-bind="value:one" />
</div>
If you like this..Please Click uplink
*or*
If it solves your problem .. Mark this as answer