I am building a sidebar to filter a main view, like for instance the one at John Lewis. I have the code working but it ain't pretty.
I know there are several SO questions on similar lines but I can't quite fathom my own use case.
I need to get the names of the checkboxes from the server ( eg via JSON ) to dynamically create observableArrays on my ShopView.
Here's how it is:
var data = {
'gender' : [ ],
'color' : [ ]
};
var filterMapping = {
create: function( obj ) {
return ko.observableArray( obj.data );
}
}
var ShopView = new function() {
var self = this;
ko.mapping.fromJS( { filters: data }, filterMapping, self );
// this is the bit I don't like
this.filterChange = ko.computed(function () {
for( var key in self.filters ) {
var obj = self.filters[key];
if( ko.isObservable(obj)){
obj();
}
}
});
this.filterChange.subscribe( function( ) {
//make AJAX request for products using filter state
});
}
My HTML looks as you'd expect:
Gender
<ul>
<li><input type="checkbox" value="male" data-bind="checked: filters.gender" />Male</li>
<li><input type="checkbox" value="female" data-bind="checked: filters.gender" />Female</li>
</ul>
As I say, it works, but it's not nice. In an ideal world I could subscribe to this.filters, eg
this.filters.subscribe( function() {
//make AJAX request for products using filter state
});
NB I'm not trying to do the filtering on the client side - just update my viewmodel when the dynamically-bound checkboxes change.
Any ideas? thanks!
First, the mapping plugin should be treated as an aid to code duplication. I don't think its a good idea to think of the mapping plugin as a solution in and of itself; at least not directly. It also obscures what is happening when you post your code on SO, since we can't see the models you are working with. Just a thought.
Now, ff you want to get dynamic filters from the server, and use them to filter a list of items (like you would in a store), I would do it something like this (here is the fiddle):
var FilterOption = function(name) {
this.name = name;
this.value = ko.observable(false);
};
var Filter = function(data) {
var self = this;
self.name = data.name;
options = ko.utils.arrayMap(data.options, function(o) {
return new FilterOption(o);
});
self.options = ko.observableArray(options);
self.filteredOptions = ko.computed(function() {
var options = []
ko.utils.arrayForEach(self.options(), function(o) {
if (o.value()) options.push(o.name);
});
//If no options, false represents no filtering for this type
return options.length ? options : false;
});
};
var ViewModel = function(data) {
var self = this;
self.items = ko.observableArray(data.items);
filters = ko.utils.arrayMap(data.filters, function(i) {
return new Filter(i);
});
self.filters = ko.observableArray(filters);
self.filteredItems = ko.computed(function() {
//Get the filters that are actually active
var filters = ko.utils.arrayFilter(self.filters(), function(o) {
return o.filteredOptions();
});
//Remove items that don't pass all active filter
return ko.utils.arrayFilter(self.items(), function(item) {
var result = true;
ko.utils.arrayForEach(filters, function(filter) {
var val = item[filter.name.toLowerCase()];
result = filter.filteredOptions().indexOf(val) > -1;
});
return result;
});
});
};
The next obvious step would be to add support for items that had multiple properties, but or options properties, but this should give you the basic idea. You have a list of filters, each with any number of options (which stack additively), and you use a computed items array to store the result of filtering the items.
Edit: To get the items using an ajax subscription, you would replace the FilteredItems prop with a computed that gets the selected filters, and then subscribe to it, like this:
var ViewModel = function(data) {
var self = this;
self.items = ko.observableArray(data.items);
filters = ko.utils.arrayMap(data.filters, function(i) {
return new Filter(i);
});
self.filters = ko.observableArray(filters);
self.selectedFilters = ko.computed(function() {
ko.utils.arrayFilter(self.filters(), function(o) {
return o.filteredOptions();
});
});
self.selectedFilters.subscribe(function() {
//Ajax request that updates self.items()
});
};
Related
I have a working knockout js script, myValues is an array result of a ko.computed, then I pass it down to myValues2 which calls a myFunction to make each object in that array as "observable". This works but I wanted to call myFunction in self.myValues so that I wouldn't have to create another observableArray myValues2. Can you help me combine the script of myValues and myValues2 so that I can finally delete self.myValues2. Here is my code:
var myFunction = function (id, name, amount, automatic) {
var self = this;
self.Id = ko.observable(id);
self.Name = ko.observable(name);
self.Amount = ko.observable(amount);
self.Automatic = ko.observable(automatic);
};
self.myValues = ko.computed(function () {
return ko.utils.arrayFilter(self.completeList(), function (ded) {
return ded.automatic() == true;
});
});
self.myValues2 = ko.observableArray();
self.myValues2(ko.utils.arrayMap(self.myValues(), function (dd) {
return new myFunction(dd.id(), dd.name(), dd.amount(), dd.automatic());
}));
self.completeList()
how defined this array?
Because you began to filter this list by automatic field and then to fill other list. Strange order.
return ded.automatic() == true;
I have a Grandparent, Parent, Child ViewModel relationship setup in knockout and knockout mapping, CustomerViewModel, WorkOrderViewModel, and RepairViewModel.
I want to setup a child ko.computed value within the child that Take the amount of hours in the RepairViewModel and multiplies it by Rate within the WorkOrderView Model.
Within the RepairViewModel I have code like this:
self.RepairCost = ko.computed(function () {
return (self.Hours() * self.parent.LabourChargeCost()).toFixed(2);
});
Is there any way to get the parent's value?
Thanks so much!
Here is the JS code I'm using (simplified):
var workOrderMapping = {
'WorkOrders': {
key: function (workOrders) {
return ko.utils.unwrapObservable(workOrders.WorkOrderId);
},
create: function (options) {
return new WorkOrderViewModel(options.data);
}
},
'Repairs': {
key: function (repairs) {
return ko.utils.unwrapObservable(repairs.RepairId);
},
create: function (options) {
return new RepairViewModel(options.data);
}
}
};
RepairViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, workOrderMapping, self);
self.RepairCost = ko.computed(function () {
return (self.Hours() * self.parent.LabourChargeCost()).toFixed(2);
})
;
}
WorkOrderViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, workOrderMapping, self);
}
CustomerViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, workOrderMapping, self);
self.save = function () {
//alert(ko.toJSON(self));
$.ajax({
url: "/Customers/Save/",
type: "POST",
data: ko.toJSON(self),
contentType: "application/json",
success: function (data) {
//alert("succ");
//alert(data.customerViewModel);
// if (data.customerViewModel != null) {
//alert("succ2");
new PNotify({
title: 'Saved',
text: 'Record saved successfully',
type: 'success',
styling: 'bootstrap3'
});
ko.mapping.fromJS(data.customerViewModel, workOrderMapping, self);
if (data.newLocation != null)
window.location = data.newLocation;
},
});
};
}
You can't access the parent in the child model unless you pass the parent to the child and kept a reference.
What has worked better for me in the past is passing the value to the child model and then add to subscribe in the parent to update the child when the value is changed.
function Parent(){
var self = this;
self.someValue = ko.obserable();//init if you need to
self.children = [new Child(self.someValue())]
self.someValue.subscribe(function(value){
for(var i = 0;i<self.children.length;i++){
self.children[i].parentValue(value);
}
});
}
function Child(value){
var self = this;
self.parentValue = ko.observable(value);
}
Unfortunately you cannot do that, and it is a limitation not of Knockout but JS: you don't have access to the parent context from within an object property.
What you can do is, as #GrayTower mentioned, pass your parent as a parameter, but this to me, feels a bit like a hack (I admit to using it sometimes though). You could also modify your child viewmodels once they have been initiated, from either within the parent, or externally, before the view model is bound. I don't really understand the flow of properties in the code you presented, but I hope a smaller test case will suit your needs: http://jsfiddle.net/kevinvanlierde/507k237y/. Suppose we have the following parent-child viewmodels:
// symbolizes an employee
function ChildVM(name, hoursWorked) {
var self = this, parent;
this.name = name;
this.hoursWorked = hoursWorked;
}
// symbolizes a payment system
function MasterVM() {
var self = this;
this.rate = 25; // dollars/hour
this.employees = [
new ChildVM('Chris',16),
new ChildVM('Cagle',32)
];
}
var app = new MasterVM(),
view = document.getElementsByTagName('table')[0];
We want to add a property payout to each ChildVM in employees, which will use rate from MasterVM in combination with hoursWorked from ChildVM, i.e. a ko.computed. You could simply paste a function inside the MasterVM constructor, like this:
ko.utils.arrayForEach(self.employees, function(i) {
i.payout = ko.computed(function() {
return i.hoursWorked*self.rate;
});
});
Or you could make it a method and call it before calling ko.applyBindings:
this.initEmployees = function() {
ko.utils.arrayForEach(self.employees, function(i) {
i.payout = ko.computed(function() {
return i.hoursWorked*self.rate;
});
});
}
app.initEmployees();
ko.applyBindings(app, view);
Or you could even build an applyBindings wrapper, which executes a 'callBefore' (cf. <=> AJAX callbacks) before binding the view and the model, like so:
function initVM(VM, callbefore, element) {
callbefore(VM);
ko.applyBindings(VM, element);
}
initVM(app, function(vm) {
ko.utils.arrayForEach(vm.employees, function(i) {
i.payout = ko.computed(function() {
return i.hoursWorked*vm.rate;
});
});
},view);
fiddle
Note: Using ko.mapping.fromJSconverts all values to observables, while when your values don't need updating you don't need observables, you can use plain JS values/ objects.
jsfiddle example. Like the title says I am trying to use a computed observable along with rniemeyer knockout sortable example. I keep getting
the write method needs to be implemented
This error is viewable in the developer console.
I have a write method implement on my ko.computed but it still errors out. What I am I doing wrong?
html and javascript below
<div id="main">
<h3>Tasks</h3>
<div class="container" data-bind="sortable: tasks">
<div class="item">
<span data-bind="visible: !$root.isTaskSelected($data)">
</span>
<span data-bind="visibleAndSelect: $root.isTaskSelected($data)">
<input data-bind="value: name, event: { blur: $root.clearTask }" />
</span>
</div>
</div>
</div>
var Task = function(first,last) {
var self = this;
self.firstName = ko.observable(first);
self.lastName = ko.observable(last);
self.TestName = ko.computed({
read: function (){
return self.firstName() + " " + self.lastName();
},
write: function (item) {
console.log(item);
}
});
return self;
}
var ViewModel = function() {
var self = this;
self.testTasks = ko.observableArray([
new Task("test","one"),
new Task("test","two"),
new Task("test","three")
]);
self.tasks = ko.computed({
read: function() { return self.testTasks();},
write: function(item) {console.log(item);}
});
self.selectedTask = ko.observable();
self.clearTask = function(data, event) {
if (data === self.selectedTask()) {
self.selectedTask(null);
}
if (data.name() === "") {
self.tasks.remove(data);
}
};
self.addTask = function() {
var task = new Task("new");
self.selectedTask(task);
self.tasks.push(task);
};
self.isTaskSelected = function(task) {
return task === self.selectedTask();
};
};
//control visibility, give element focus, and select the contents (in order)
ko.bindingHandlers.visibleAndSelect = {
update: function(element, valueAccessor) {
ko.bindingHandlers.visible.update(element, valueAccessor);
if (valueAccessor()) {
setTimeout(function() {
$(element).find("input").focus().select();
}, 0); //new tasks are not in DOM yet
}
}
};
ko.applyBindings(new ViewModel());
As the very author of this plugin says here, you can't use a computed observable; the sortable plugin depends on an actual observable array.
Which makes sense when you think about it: the plugin is actually manipulating the various indexes of the array as you re-sort the elements.
Here's a "writableComputedArray" if you want the best of both worlds. If you add/remove from the array, and a subsequent re-compute of the observable performs the same add/remove, subscribers will not get notified the second time. However, it's your responsibility to make sure that there are no discrepancies between the computation of the array and what actually gets added/removed. You can accomplish this by making the necessary changes in the sortable binding's afterMove event.
ko.writeableComputedArray = function (evaluatorFunction) {
// We use this to get notified when the evaluator function recalculates the array.
var computed = ko.computed(evaluatorFunction);
// This is what gets returned to the caller and they can subscribe to
var observableArray = ko.observableArray(computed());
// When the computed changes, make the same changes to the observable array.
computed.subscribe(function (newArray) {
// Add any new values
newArray.forEach(function (value) {
var i = observableArray.indexOf(value);
if (i == -1) {
// It's a new value, push it
observableArray.unshift(value);
}
});
// Remove any old ones. Loop backwards since we're removing items from it.
for (var valueIndex = observableArray().length - 1; valueIndex >= 0; valueIndex--) {
var value = observableArray()[valueIndex];
var i = newArray.indexOf(value);
if (i == -1) {
// It's an old value, remove it
observableArray.remove(value);
}
}
});
return observableArray;
};
I'm trying to use a computed observable to create a custom div ID (e.g. branch3). However, anytime I attempt to bind the computed I get the "unable to parse bindings" error. I'm sure I could just go about doing this a different way, but I just don't understand why I can't use a computed here. I'm pretty sure I've seen it done.
Here is the jsfiddle I've been working on.
FIDDLE
var branchList =[{"Id":1,"Latitude":40.2444400000,"Longitude":-111.6608300000,"StreetAddress":"1525 W 820 N","BranchName":"GPS","City":"Cityplacwe","State":"UT","Zip":"84601"},{"Id":2,"Latitude":40.2455550000,"Longitude":-111.6616100000,"StreetAddress":"123 N Center","BranchName":"GPS Branch 2","City":"Lehi","State":"UT","Zip":"84043"}];
//myMarkers = new Array();
var Branch = function (data) {
var self = this;
self.Id = ko.observable(data.Id);
self.Latitude = ko.observable(data.Latitude);
self.Longitude = ko.observable(data.Id);
self.BranchName = ko.observable(data.BranchName);
self.StreetAddress = ko.observable(data.StreetAddress);
self.City = ko.observable(data.City);
self.State = ko.observable(data.State);
self.Zip = ko.observable(data.Zip);
this.DivId = ko.computed(function () {
return self.Id();
});
//self.DivId = ko.computed({
// //Reading from object to field
// read: function () {
// return "branch" + self.Id();
// },
// //writing from field to object
// write: function (value) {
// }
//});
}
var BranchViewModel = function () {
var self = this;
//create knockout array
self.branchArrayKO = ko.observableArray(branchList);
}
And the HTML
<div data-bind="foreach: branchArrayKO">
<div data-bind="attr: {'id': DivId}">
<p></p>
<h2></h2>
<ul>
<li data-bind="text: Id"></li>
<li data-bind="text: BranchName"></li>
<li data-bind="text: StreetAddress"></li>
</ul>
</div>
</div>
You need to convert your raw JavaScript array into an array of Branches. One way to do this is to use ko.utils.arrayMap to iterate over each item in the list and create a new Branch:
var BranchViewModel = function() {
var self = this;
//create knockout array
self.branchArrayKO = ko.observableArray(ko.utils.arrayMap(branchList, function(branch) {
return new Branch(branch);
}));
}
Updated example: http://jsfiddle.net/hawMW/2/
Another alternative that might be useful is the knockout mapping plugin, which you can use to automate all or part of the mapping process.
I have a viewModel with an observableArray of objects with observable variables.
My template shows the data with an edit button that hides the display elements and shows input elements with the values bound. You can start editing the data and then you have the option to cancel. I would like this cancel to revert to the unchanged version of the object.
I have tried clone the object by doing something like this:
viewModel.tempContact = jQuery.extend({}, contact);
or
viewModel.tempContact = jQuery.extend(true, {}, contact);
but viewModel.tempContact gets modified as soon as contact does.
Is there anything built into KnockoutJS to handle this kind of situation or am I best off to just create a new contact with exactly the same details and replace the modified contact with the new contact on cancel?
Any advice is greatly appreciated. Thanks!
There are a few ways to handle something like this. You can construct a new object with the same values as your current one and throw it away on a cancel. You could add additional observables to bind to the edit fields and persist them on the accept or take a look at this post for an idea on encapsulating this functionality into a reusable type (this is my preferred method).
I ran across this post while looking to solve a similar problem and figured I would post my approach and solution for the next guy.
I went with your line of thinking - clone the object and repopulate with old data on "undo":
1) Copy the data object into a new page variable ("_initData")
2) Create Observable from original server object
3) on "undo" reload observable with unaltered data ("_initData")
Simplified JS:
var _viewModel;
var _initData = {};
$(function () {
//on initial load
$.post("/loadMeUp", {}, function (data) {
$.extend(_initData , data);
_viewModel = ko.mapping.fromJS(data);
});
//to rollback changes
$("#undo").live("click", function (){
var data = {};
$.extend(data, _initData );
ko.mapping.fromJS(data, {}, _viewModel);
});
//when updating whole object from server
$("#updateFromServer).live("click", function(){
$.post("/loadMeUp", {}, function (data) {
$.extend(_initData , data);
ko.mapping.fromJS(data, {}, _viewModel);
});
});
//to just load a single item within the observable (for instance, nested objects)
$("#updateSpecificItemFromServer).live("click", function(){
$.post("/loadMeUpSpecificItem", {}, function (data) {
$.extend(_initData.SpecificItem, data);
ko.mapping.fromJS(data, {}, _viewModel.SpecificItem);
});
});
//updating subItems from both lists
$(".removeSpecificItem").live("click", function(){
//object id = "element_" + id
var id = this.id.split("_")[1];
$.post("/deleteSpecificItem", { itemID: id }, function(data){
//Table of items with the row elements id = "tr_" + id
$("#tr_" + id).remove();
$.each(_viewModel.SpecificItem.Members, function(index, value){
if(value.ID == id)
_viewModel.SpecificItem.Members.splice(index, 1);
});
$.each(_initData.SpecificItem.Members, function(index, value){
if(value.ID == id)
_initData.SpecificItem.Members.splice(index, 1);
});
});
});
});
I had an object that was complicated enough that I didn't want to add handlers for each individual property.
Some changes are made to my object in real time, those changes edit both the observable and the "_initData".
When I get data back from the server I update my "_initData" object to attempt to keep it in sync with the server.
Very old question, but I just did something very similar and found a very simple, quick, and effective way to do this using the mapping plugin.
Background; I am editing a list of KO objects bound using a foreach. Each object is set to be in edit mode using a simple observable, which tells the view to display labels or inputs.
The functions are designed to be used in the click binding for each foreach item.
Then, the edit / save / cancel is simply:
this.edit = function(model, e)
{
model.__undo = ko.mapping.toJS(model);
model._IsEditing(true);
};
this.cancel = function(model, e)
{
// Assumes you have variable _mapping in scope that contains any
// advanced mapping rules (this is optional)
ko.mapping.fromJS(model.__undo, _mapping, model);
model._IsEditing(false);
};
this.save = function(model, e)
{
$.ajax({
url: YOUR_SAVE_URL,
dataType: 'json',
type: 'POST',
data: ko.mapping.toJSON(model),
success:
function(data, status, jqxhr)
{
model._IsEditing(false);
}
});
};
This is very useful when editing lists of simple objects, although in most cases I find myself having a list containing lightweight objects, then loading a full detail model for the actual editing, so this problem does not arise.
You could add saveUndo / restoreUndo methods to the model if you don't like tacking the __undo property on like that, but personally I think this way is clearer as well as being a lot less code and usable on any model, even one without an explicit declaration.
You might consider using KO-UndoManager for this. Here's a sample code to register your viewmodel:
viewModel.undoMgr = ko.undoManager(viewModel, {
levels: 12,
undoLabel: "Undo (#COUNT#)",
redoLabel: "Redo"
});
You can then add undo/redo buttons in your html as follows:
<div class="row center-block">
<button class="btn btn-primary" data-bind="
click: undoMgr.undoCommand.execute,
text: undoMgr.undoCommand.name,
css: { disabled: !undoMgr.undoCommand.enabled() }">UNDO</button>
<button class="btn btn-primary" data-bind="
click: undoMgr.redoCommand.execute,
text: undoMgr.redoCommand.name,
css: { disabled: !undoMgr.redoCommand.enabled() }">REDO</button>
</div>
And here's a Plunkr showing it in action. To undo all changes you'll need to loop call undoMgr.undoCommand.execute in javascript until all the changes are undone.
I needed something similar, and I couldn't use the protected observables, as I needed the computed to update on the temporary values. So I wrote this knockout extension:
This extension creates an underscore version of each observable ie self.Comments() -> self._Comments()
ko.Underscore = function (data) {
var obj = data;
var result = {};
// Underscore Property Check
var _isOwnProperty = function (isUnderscore, prop) {
return (isUnderscore == null || prop.startsWith('_') == isUnderscore) && typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop])
}
// Creation of Underscore Properties
result.init = function () {
for (var prop in obj) {
if (_isOwnProperty(null, prop)) {
var val = obj[prop]();
var temp = '_' + prop;
if (obj[prop].isObservableArray)
obj[temp] = ko.observableArray(val);
else
obj[temp] = ko.observable(val);
}
}
};
// Cancel
result.Cancel = function () {
for (var prop in obj) {
if (_isOwnProperty(false, prop)) {
var val = obj[prop]();
var p = '_' + prop;
obj[p](val);
}
}
}
// Confirm
result.Confirm = function () {
for (var prop in obj) {
if (_isOwnProperty(true, prop)) {
var val = obj[prop]();
var p = prop.replace('_', '');
obj[p](val);
}
}
}
// Observables
result.Properties = function () {
var obs = [];
for (var prop in obj) {
if (typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop])) {
var val = obj[prop]();
obs.push({ 'Name': prop, 'Value': val });
}
}
return obs;
}
if (obj != null)
result.init();
return result;
}
This extension will save you writing duplicates of each of your observables and ignores your computed. It works like this:
var BF_BCS = function (data) {
var self = this;
self.Score = ko.observable(null);
self.Comments = ko.observable('');
self.Underscore = ko.Underscore(self);
self.new = function () {
self._Score(null);
self._Comments('');
self.Confirm();
}
self.Cancel = function () {
self.Pause();
self.Underscore.Cancel();
self.Resume();
}
self.Confirm = function () {
self.Pause();
self.Underscore.Confirm();
self.Resume();
}
self.Pause = function () {
}
self.Resume = function () {
}
self.setData = function (data) {
self.Pause();
self._Score(data.Score);
self._Comments(data.Comments);
self.Confirm();
self.Resume();
}
if (data != null)
self.setData(data);
else
self.new();
};
So as you can see if you have buttons on html:
<div class="panel-footer bf-panel-footer">
<div class="bf-panel-footer-50" data-bind="click: Cancel.bind($data)">
Cancel
</div>
<div class="bf-panel-footer-50" data-bind="click: Confirm.bind($data)">
Save
</div>
</div>
Cancel will undo and revert your observables back to what they were, as were save will update the real values with the temp values in one line