I am trying to preopulate a knockout component on document ready.
I've written the following code:
function Finding(id, trigger) {
var self = this;
self.id = ko.observable(id);
self.trigger = ko.observable(trigger);
}
function FindingViewModel() {
let self = this;
self.findings = ko.observableArray();
self.addFinding = function () {
self.findings.push(new Finding(self.findings().length + 1, ""));
};
self.removeFinding = function (finding) {
self.findings.remove(finding);
ko.utils.arrayForEach(self.findings(), function (value, i) {
self.findings.replace(value, new Finding(i + 1, value.trigger()));
});
};
self.update = function (data) {
var findings = data.findings;
for (var index = 0; index < findings.length; ++index) {
var finding = findings[index];
self.findings.push(new Finding(self.findings().length + 1, finding.trigger));
}
};
}
ko.components.register('finding', {
template: `<table>
<tbody data-bind="foreach: findings">
<tr>
<td><span data-bind="text: id"/></td>
<td><input data-bind="value: trigger"/></td>
<td>Remove</td>
</tr></tbody></table>
<button data-bind="click: addFinding">Add a Finding</button>`,
viewModel: FindingViewModel
});
$(function () {
ko.applyBindings();
$.getJSON("/_get_findings", function (data) {
//findingModel.update(data);
})
});
How can I access the underlying Viewmodel from the finding component to set data from inside the getJSON function?
thx to Jeroen the solution looks like this:
function FindingViewModel() {
let self = this;
self.findings = ko.observableArray();
self.addFinding = function () {
self.findings.push(new Finding(self.findings().length + 1, ""));
};
self.removeFinding = function (finding) {
self.findings.remove(finding);
ko.utils.arrayForEach(self.findings(), function (value, i) {
self.findings.replace(value, new Finding(i + 1, value.trigger()));
});
};
self.update = function (data) {
let findings = data.findings;
for (let index = 0; index < findings.length; ++index) {
let finding = findings[index];
self.findings.push(new Finding(self.findings().length + 1, finding.trigger));
}
};
$.getJSON("/_get_findings", function (data) {
self.update(data);
});
}
Related
Why does my click event not work in the second foreach?
My html:
<div class="row" id="menuBody" data-bind="foreach:categoryArray">
<div class="outer col-md-2" data-bind=" attr:{id:id},event:{mouseover :$parent.mouseOverKnockout,mouseout:$parent.mouseOutKnockout }">
<div class="inner col-md-12">
<label class="label" data-bind="text:name"> </label>
<div class="children" data-bind="css:{changeTopChildren: changeTopChildren}">
<ul data-bind="foreach:$parent.items1" class="childrenUl">
<li data-bind=" text: name,attr:{id:id},click: $parent.selectLi" class="childrenLi col-md-12"></li>
</ul>
</div>
</div>
</div>
</div>
My script:
var modelCategory = function (id, name) {
var self = this;
self.changeTopChildren = ko.observable(false);
self.name = ko.observable(name);
self.id = ko.observable(id);
}
var modelProduct = function (id, name) {
var _self = this;
_self.name = ko.observable(name);
_self.id = ko.observable(id);
_self.selectLi = function () {
alert("li");
console.log(" selectLi");
};
}
var viewModelMenuBody = function () {
var self = this;
self.selectLi = function (tag) {
alert("li");
console.log(" selectLi");
};
self.categoryArray = ko.observableArray();
self.items1 = ko.observableArray();
var temp = null;
self.mouseOverKnockout = function (arg, e) {
temp = arg;
for (var i = 0; i < self.categoryArray().length; i++) {
self.categoryArray()[i].changeTopChildren(false);
}
arg.changeTopChildren(true);
$.getJSON("/Home/getChildrenForMenu", { id: arg.id }, function (rowProduct) {
self.items1.removeAll();
for (var total = 0; total < rowProduct.length; total++) {
var temp = new modelProduct();
temp.id(rowProduct[total].id);
temp.name(rowProduct[total].name);
self.items1.push(temp);
}
});
}
self.mouseOutKnockout = function (arg) {
if (arg!=null)
arg.changeTopChildren(false);
//else
// temp.changeTopChildren(false);
};
(function () {
$.getJSON("/Home/getDataForMenu", null, function (rowCategory) {
for (var total = 0; total < rowCategory.length; total++) {
var temp = new modelCategory();
temp.id(rowCategory[total].id);
temp.name(rowCategory[total].name);
self.categoryArray.push(temp);
}
});
})();
};
var viewModel1 = new viewModelMenuBody();
ko.applyBindings(viewModel1, document.getElementById('menuBody'));
All methods are defined within root viewmodel object. So $parent.selectLi call from the nested foreach binding won't work because $parent context refers to current item of the outer foreach.
Use $root.selectLi instead.
More info: http://knockoutjs.com/documentation/binding-context.html
I am building a Knockout viewmodel. The model has some fields like dateFrom, DateTo, Status and so forth. In addition, there is a list of invoices.
The invoices have some pricing information, which is a price object. My main object also have a price object, which should iterate all the invoice objects and find the total price.
My problem is the following:
The code runs smooth, until I add the following in my view:
<label data-bind="text:totalPrice().price().priceExVat"></label>
Here I get an:
TypeError: $(...).price is not a function
Which refers to my:
exVat += $(ele).price().priceExVat;
I don't understand it, because in my each function, I should have the element. The element have a price() function, so why would it not work? Is it some scope issue?
My viewmodel:
function invoice(invoiceDate, customerName, pdfLink, status) {
var self = this;
self.pdfLink = pdfLink;
self.print = ko.observable(0);
self.customerName = customerName;
self.status = status;
self.pdfPagesCount = function () {
return 1;
};
self.invoiceDate = invoiceDate;
self.price = function () {
return new price(1.8, 2.1);
};
}
function price(exVat, total) {
var self = this;
self.currency = '€';
self.total = total;
self.priceExVat = exVat;
self.vatPercentage = 0.25;
self.vatAmount = self.exVat - self.total;
self.priceExVatText = function() {
return self.priceExVat + ' ' + self.currency;
};
}
var EconomicsViewModel = function (formSelector, data) {
var self = this;
self.dateFrom = data.dateFrom;
self.dateTo = data.dateTo;
self.invoices = ko.observableArray([
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com","not printed"),
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com", "not printed")
]);
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices).each(function (index, ele) {
console.log(ele);
exVat += $(ele).price().priceExVat;
});
return price(exVat, 0);
};
};
From what I read, totalPrice is actually a price object, you don't need to put a .price():
<label data-bind="text:totalPrice().priceExVat"></label>
EDIT:
Sorry, there were also problems on your javascript:
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices()).each(function (index, ele) { //<-- add () to self.invoices to get the array
console.log(ele);
exVat += ele.price().priceExVat; //<-- remove useless jQuery
});
return new price(exVat, 0); //<-- add 'new'
};
Check this fiddle
EDIT2:
To answer robert.westerlund's comment, you could remove $().each and replace with ko.utils.arrayForEach or even simpler use a for loop:
var arr = self.invoices();
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
exVat += arr[i].price().priceExVat;
}
Updated fiddle
This is my div.
<div id="storyBody" data-bind="foreach: CurrentStory.Paragraphs">
<p data-bind="text: $data">
</p>
</div>
Here is my model:
$(function ()
{
var currentUser = "";
nm.Story = function()
{
this.Paragraphs = ko.observableArray([]);
this.CurrentEditorId = ko.observable();
this.LastEditorId = ko.observable();
};
nm.StoryPreview = function()
{
this.Preview = "";
this.documentId = 0;
};
nm.vm = function ()
{
var UserStoryList = ko.observableArray([]),
CurrentStory = ko.observable(),
GetCurrentStory = function (data) {
nm.getStory(data.documentId, GetCurrentStoryCallback, GetCurrentStoryErrorCallback)
},
GetCurrentStoryCallback = function (data) {
var story = new nm.Story().CurrentEditorId(data.CurrentEditorId)
.LastEditorId(data.LastEditorId);
story.Paragraphs(data.Paragraphs);
CurrentStory(story);
},
GetCurrentStoryErrorCallback = function (data) {
},
LoadUserStoriesList = function() {
nm.getStories(LoadUserStoriesListCallback, LoadUserStoriesListErrorCallback);
},
LoadUserStoriesListCallback = function(data)
{
$.each(data, function (index, value) {
var storyPreview = new nm.StoryPreview();
storyPreview.Preview = value.Preview;
storyPreview.documentId = value.DocumentId;
UserStoryList.push(storyPreview);
});
},
LoadUserStoriesListErrorCallback = function (data)
{
};
return {
UserStoryList: UserStoryList,
CurrentStory: CurrentStory,
LoadUserStoriesList : LoadUserStoriesList,
LoadUserStoriesListCallback: LoadUserStoriesListCallback,
GetCurrentStory: GetCurrentStory
}
}();
nm.vm.LoadUserStoriesList();
ko.applyBindings(nm.vm);
});
Seems like this should work, but it doesn't. Any ideas?
You are missing some parenthesis.
Could you try with:
<div id="storyBody" data-bind="foreach: CurrentStory().Paragraphs">
<p data-bind="text: $data">
</p>
</div>
I created an ObservablePropertyList which is supposed to execute a callback when a property changes. The implementation is:
function ObservablePropertyList(nameCallbackCollection) {
var propertyList = {};
for (var index in nameCallbackCollection) {
var private_value = {};
propertyList["get_" + index] = function () { return private_value; }
propertyList["set_" + index] = function (value) {
// Set the value
private_value = value;
// Invoke the callback
nameCallbackCollection[index](value);
}
}
return propertyList;
}
And here's a quick test demonstration:
var boundProperties = BoundPropertyList({
TheTime: function (value) {
$('#thetime').text(value);
},
TheDate: function (value) {
$('#thedate').text(value);
}
});
var number = 0;
setInterval(function () {
boundProperties.set_TheTime(new Date());
boundProperties.set_TheDate(number++);
}, 500);
For some reason though, the properties are not being assigned correctly or something. That is, calling set_TheTime for some reason executes the callback for set_TheDate, almost as though it were binding everything to only the last item in the list. I can't for the life of me figure out what I'm doing wrong.
When using loops like that you need to wrap it in an enclosure
function ObservablePropertyList(nameCallbackCollection) {
var propertyList = {};
for (var index in nameCallbackCollection) {
(function(target){
var private_value = {};
propertyList["get_" + index] = function () { return private_value; }
propertyList["set_" + index] = function (value) {
// Set the value
private_value = value;
// Invoke the callback
target(value);
}
})(nameCallbackCollection[index]);
}
return propertyList;
}
You need to create a closure in order for each iteration of the for loop to have its own private_variable object. Otherwise, each iteration just overwrites the previous (since private_variable is hoisted to the top of its scope). I'd set it up like this:
var ObservablePropertyList = (function () {
"use strict";
var handleAccess = function (propList, key, callback) {
var privValue = {};
propList["get_" + key] = function () {
return privValue;
};
propList["set_" + key] = function (value) {
// Set the value
privValue = value;
// Invoke the callback
callback(value);
};
};
return function (coll) {
var propertyList = {}, index;
for (index in coll) {
handleAccess(propertyList, index, coll[index]);
}
return propertyList;
};
}());
var boundProperties = ObservablePropertyList({
TheTime: function (value) {
$('#thetime').text(value);
},
TheDate: function (value) {
$('#thedate').text(value);
}
}), number = 0;
setInterval(function () {
boundProperties.set_TheTime(new Date());
boundProperties.set_TheDate(number++);
}, 500);
DEMO: http://jsfiddle.net/PXHDT/
I have the object:
var IOBreadcrumb = function () {
this.breadcrumbs = [];
this.add = function(title, url) {
var crumb = {
title: title,
url:url
};
this.breadcrumbs.push(crumb);
};
};
Lets say I add 3 items to breadcrumbs:
IOBreadcrumb.add('a',a);
IOBreadcrumb.add('b',b);
IOBreadcrumb.add('c',c);
How can I iterate over this and print out the title, and the url?
You could add an each method:
var IOBreadcrumb = function IOBreadcrumb() {
this.breadcrumbs = [];
this.add = function(title, url) {
var crumb = {
title: title,
url:url
};
this.breadcrumbs.push(crumb);
};
this.each = function(callback) {
for (var i = 0; i < this.breadcrumbs.length; i++) {
callback(this.breadcrumbs[i]);
}
}
};
And use it like this:
var ioBc = new IOBreadcrumb();
ioBc.add('a',a);
ioBc.add('b',b);
ioBc.add('c',c);
ioBc.each(function(item) {
console.log(item.title + ' ' + item.url);
});
add a method
print = function(){
for (var i = 0; i < this.breadcrumbs.length; i++) {
var current = this.breadcrumbs[i];
console.log(current.title, current.url);
}
}
to your IOBreadcrumb object, and then just invoke it
IOBreadcrumb.print();
Jason's answer is almost there. The only improvement is that there is no need to implement your own each function if you're using jquery.
var ioBc = new IOBreadcrumb();
ioBc.add('a',a);
ioBc.add('b',b);
ioBc.add('c',c);
$.each(ioBc.breadcrumbs, function(item) {
console.log(item.title + ' ' + item.url);
});
At the very least you should use $.each from your each function if you don't want callers to access breadcrumbs directly
...
this.each = function(callback) {
$.each(this.breadcrumbs, callback);
}
...