This seems like the most basic part of using knockout, and I'm not sure why it isn't working, but for some reason , 2 of my 5 knockout observables are holding onto their new values.
In the setup of the model:
self.CProviderIdentifier = ko.observable();
self.ReferringProviderIdentifier = ko.observable();
self.BillableCareProviderIdentifier = ko.observable();
self.ServiceLocationIdentifier = ko.observable();
self.PracticeLocationIdentifier = ko.observable();
Inside of an AJAX call which returns a number of items inside of a JSON object, I extract the relevant pieces of information, and put them into the correct observable:
visitModel.CProviderIdentifier(data.CareProviderIdentifier);
visitModel.ReferringProviderIdentifier((data.ReferringProviderIdentifier == null ||
data.ReferringProviderIdentifier == "undefined") ? 0 : data.ReferringProviderIdentifier);
visitModel.BillableCareProviderIdentifier(data.BillableCareProviderIdentifier);
visitModel.PracticeLocationIdentifier(data.PracticeLocationIdentifier);
visitModel.ServiceLocationIdentifier(data.ServiceLocationIdentifier);
Now, if none of them worked, it would make (some) sense, but only CProviderIdentifier and ReferringProviderIdentifier have no data. I've checked the data in a break point right before getting into setting the properties, and the values from data are 1003 and 0, but the two observables are undefined are the above block of code.
I'm working on getting a fiddle working for this: https://jsfiddle.net/bz3mq6z9/
The assignment is made in the loadData function. Inside it, Javascript does not know what is visitModel. That variable does not exist and does not have any purpose in the setter.
Use self instead of visitModel. That way knockout knows that he is assigning values to the view model
Greetings
You have some bugs in your code:
should bind viewmode with DOM using:
ko.applyBindings(visitModel);
ko.observable is a function, so you should use call it before combine string.
<span data-bind="text: CProviderIdentifier() + 'cp'"></span>
it's not a good idea use visitModel in LoadData function, you can just use self to keep the reference.
see this demo: http://jsfiddle.net/bz3mq6z9/6/
Related
In my webapp i am creating three viewmodel which are nested like first viewmodel is parent of second , second is parent of third. now if i want to display value of third view model it is giving me error that it is not define . In my code LoanRateViewModel is parent whose child is Term and Tier is child of Term.
function Tier(data){
var self = this;
self.tierValue = ko.observable(data.tierValue || "");
self.rate = ko.observable(data.rate || "121212");
self.simplerate = ko.observable(data.simplerate || "121212");
self.compoundrate = ko.observable(data.compoundrate || "12212");
}
function Term(data) {
var self = this;
self.Tiers = ko.observableArray([]);
self.loanterm = ko.observable(data.loanterm || "12");
self.termIdentifier = ko.observable(data.termIdentifier || "12");
};
here is jsfiddle link DEMO
How can i call the grand child is it possible through knockout js ?
The problem is unfortunately not in the code you posted*, but in the fiddle.
What you want is certainly possible, though as mentioned in comments you'd need proper nesting to reach grand-children, because they will always be in the context of a certain parent (Term). I've (mostly) fixed your jsfiddle, fixing issues until there were no errors left. Some things that would answer your "question" are:
Make sure you properly close DOM elements (e.g. table and tbody);
Make sure you refer to $root for methods that are on the root (e.g. addTier);
In tables, make sure each row has equal number of cells (or use colspan), or your results will look weird.
* It'd be nice if you edit your question, and included the relevant (preferably well-formatted) code, so the question can remain useful for others with a similar problem.
This is my fiddle. http://jsfiddle.net/aaScC/
Please check in the example, the Score property has 3.5 value but it is being displayed as 1. I know the score property is bound to dropdown value so its coming as 1. But i want 3.5 to be displayed. Please help.
var GoalsModel = function (goals) {
var self = this;
self.goals = ko.observableArray(ko.utils.arrayMap(goals, function (goal) { return new Goal(goal) }));
};
The problem is that you just make the select element invisible. You don't want the element at all. You can use bindings if or ifnot to control this.
Here is an updated example: http://jsfiddle.net/waxwing/aaScC/1/ . I wrapped the select inside a span to make it work, but you can also use virtual bindings if you don't like to change your DOM structure.
As I understand it, eval() can be harmful. And it's annoying seeing all the warnings in my JSLint.
I've got a number of functions that are identical for my Wishlist / Shopping Cart. So I'd like to make it dynamic and only have one function of each.
Instead of cart.addItem() and wish.addItem(), I want cartWish.addItem(type).
Inside of cartWish.addItem() I need to access cart.data or wish.data, depending on the type argument.
How can I do this without resorting to eval(type).data?
I tried this[type].data and it didn't seem to work right.
What's the difference between
cart.addItem(...);
wish.addItem(...)
and
cartWish.addItem("cart", ...);
cartWish.addItem("wish", ...);
Seems like the same number of lines of code, and then all you've done is obfuscate what you are really doing. Maybe create a function that takes either a cart or wish object and assume they have the same interface:
function addItem(x, data) {
x.addItem(data);
}
var cart = ...
var wish = ...
addItem(cart, {...});
addItem(wish, {...});
Another option is to create a class:
function Item(type) {
this.type = type;
}
Item.prototype.add = function add(...) {
// ...
};
var cart = new Item("cart");
var wish = new Item("wish");
cart.add(...)
wish.add(...)
It was poor programming on my part. I didn't know that JavaScript tended to make references of objects instead of copies.
So doing...
var myReference=(type == "cart") ? cart.data : wish.data;
myReference[0].name="Bob Dole's Grill";
... will actually change cart.data[0].name outside of the function. And it will do so without making a copy of the cart object in memory.
Note: You could also just pass in the object by reference into the function, but I'm not sure if I can, because I'm sometimes invoking this function from a KnockoutJS click event.
I am customizing some jQuery plugin, and I have an error message I can't understand
var totHistory=0;
var positions = new Array();
$('.someclass').each(function(index){
var tmp = $(this).val();
addHistory({id:tmp});
});
function addHistory(obj)
{
/* Gets called on page load for each comment, and on comment submit */
totHistory++;
positions.push(obj.id);
}
At the very first iteration through .someClass, I get this message
Cannot call method 'push' of undefined
Could someone explain why ?
You should either send positions as a parameter or declare it in a scope accesible for addHistory. You should not declare it without the var keyword as that is considered a bad practice.
Try my first suggestion as that one is the only one I can help you with without knowing the structure of your other js code.
I'm using knockout.js and moment.js to compute some values about a given month. The following code works as intended:
var calendarViewModel = {
selectedMonth: ko.observable(moment().format("M")),
daysInMonth: ko.observable(moment().month(3).daysInMonth())
};
ko.applyBindings(calendarViewModel);
The returned values are "4" for selectedMonth and "30" for daysInMonth.
But what I want to do is compute the value of daysInMonth based on the current value of selectedMonth (which will change). The best code I could come up with was this:
var calendarViewModel = {
selectedMonth: ko.observable(moment().format("M")),
daysInMonth: ko.observable(moment().month(calendarViewModel.selectedMonth() - 1).daysInMonth())
};
ko.applyBindings(calendarViewModel);
I get Uncaught TypeError: Cannot read property 'selectedMonth' of undefined in the console.
The thing I'm having trouble understanding is how to reference selectedMonth properly in this context. If I create selectedMonth in some other generic variable outside of my viewModel everything I'm doing works fine.
I'm quite certain that this has to do with my (poor) understanding of JavaScript objects and nothing to do with the libraries themselves.
You need to create a computed for that:
var calendarViewModel = function(){
var self = this;
self.selectedMonth = ko.observable(moment().format("M"));
self.daysInMonth = ko.computed(function(){
var selectedMonth = self.selectedMonths();
return moment().month(selectedMonth - 1).daysInMonth();
});
};
ko.applyBindings(new calendarViewModel());
As to the difference... here we are creating an actual instance of a calendarViewModel which will set up the this context the way you expect.
It also uses a closure to ensure you can access your own members correctly inside the computed.