I have an observable Array being populated by an AJAX call but it is not updating.
function ViewModel() {
var self = this;
self.FinanceTypes = ko.observableArray([]);
self.Country = ko.observable('#Model.Country.CountryName');
function FinanceTypeViewModel(data) {
var self = this;
self.Name = data.Name;
self.Tax = data.TaxPercentage;
//self.Accounts = data.AccountTypes;
}
self.getFinanceTypes = function() {
var data = { country: ko.toJS(self.Country()) };
$.getJSON("/Admin/GetFinanceTypes", data, function(result) {
var mapped = ko.utils.arrayMap(result, function(item) {
return new FinanceTypeViewModel(item);
});
ko.utils.arrayPushAll(self.FinanceTypes(), mapped);
self.FinanceTypes.valueHasMutated();
});
}
self.getFinanceTypes();
}
The problem line is
self.FinanceTypes.valueHasMutated();
everything else works. This gives an "Uncaught ReferenceError: Name is not defined"
If I change it to
self.FinanceTypes().valueHasMutated();
I get "Uncaught TypeError: undefined is not a function"
Thanks
Calling ko.utils.arrayPushAll(self.FinanceTypes(), mapped) pushes all the items in mapped into the unwrapped FinanceTypes. Call it without unwrapping it and you won't have to call valueHasMutated: ko.utils.arrayPushAll(self.FinanceTypes, mapped)
Related
Im struggling to find a way to get the properties Override & Justification available outside of the function. The code is:
self.CasOverridesViewModel = ko.observable(self.CasOverridesViewModel);
var hasOverrides = typeof self.CasOverridesViewModel === typeof(Function);
if (hasOverrides) {
self.setupOverrides = function() {
var extendViewModel = function(obj, extend) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
extend(obj[property]);
}
}
};
extendViewModel(self.CasOverridesViewModel(), function(item) {
item.isOverrideFilledIn = ko.computed( function() {
var result = false;
if (!!item.Override()) {
result = true;
}
return result;
});
if (item) {
item.isJustificationMissing = ko.computed(function() {
var override = item.Override();
var result = false;
if (!!override) {
result = !item.hasAtleastNineWords();
}
return result;
});
item.hasAtleastNineWords = ko.computed(function() {
var justification = item.Justification(),
moreThanNineWords = false;
if (justification != null) {
moreThanNineWords = justification.trim().split(/\s+/).length > 9;
}
return moreThanNineWords;
});
item.isValid = ko.computed(function() {
return (!item.isJustificationMissing());
});
}
});
}();
}
I've tried it by setting up a global variable like:
var item;
or
var obj;
if(hasOverrides) {...
So the thing that gets me the most that im not able to grasp how the connection is made
between the underlying model CasOverridesviewModel. As i assumed that self.CasOverridesViewModel.Override() would be able to fetch the data that is written on the screen.
Another try i did was var override = ko.observable(self.CasOverridesViewModel.Override()), which led to js typeError as you cannot read from an undefined object.
So if anyone is able to give me some guidance on how to get the fields from an input field available outside of this function. It would be deeply appreciated.
If I need to clarify some aspects do not hesitate to ask.
The upmost gratitude!
not sure how far outside you wanted to go with your variable but if you just define your global var at root level but only add to it at the moment your inner variable gets a value, you won't get the error of setting undefined.
var root = {
override: ko.observable()
};
root.override.subscribe((val) => console.log(val));
var ViewModel = function () {
var self = this;
self.override = ko.observable();
self.override.subscribe((val) => root.override(val));
self.load = function () {
self.override(true);
};
self.load();
};
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
at the company where Im at we use jquery and a lot of the code is very spaghetti haphazard code. So in an effort to organize it better im researching implementing the pub sub model described in this article
So I made a really basic version of it like so:
var topics = {};
jQuery.Topic = function( id ) {
var callbacks, method,
topic = id && topics[ id ];
if ( !topic ) {
callbacks = jQuery.Callbacks();
topic = {
publish: callbacks.fire,
subscribe: callbacks.add,
unsubscribe: callbacks.remove
};
if ( id ) {
topics[ id ] = topic;
}
}
return topic;
};
$(function() {
var testService = new TestService();
testService.subscribe();
var testView = new TestView(testService);
testView.initEvents();
});
/* ---------------------VIEW----------------- */
var TestView = function(testService) {
this.testService = testService;
};
TestView.prototype.initEvents = function () {
this.publishers();
};
TestView.prototype.publishers = function() {
$("#search").on("click", function () {
var isValid = this.testService.validateForm("#container");
if(isValid){
$.Topic( "search" ).publish();
}
})
};
/* ---------------------SERVICE----------------- */
var TestService = function() {
this.testIdea = [];
};
TestService.prototype.validateForm = function (section) {
var referralValid = true;
$(section).find('input,select').filter('[required]:visible').each(function (i, requiredField) {
if(requiredField.value === '') {
//'breaks' the loop out
referralValid = false;
return referralValid;
}
});
return referralValid;
};
TestService.prototype.search = function() {
};
TestService.prototype.subscribe = function() {
var self = this;
$.Topic("search").subscribe( function() {
self.search()
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div id="container">
<input type="text">
</div>
<button id="search">Search</button>
</div>
However when I put that in jsfiddle I get the error that Uncaught TypeError: TestService is not a constructor
in the stackoverflow snippet and on my local version I get a different error of Uncaught TypeError: Cannot read property 'validateForm' of undefined. I cant see what Im doing wrong. Any pointers?
You can declare constructor functions in the way you are doing it (assigning constructor to variable):
var TestView = function(testService) {
this.testService = testService;
};
Like in this simple example:
var myClass = function(name) {
this.name = name;
}
myClass.prototype = {
hello: function() {
console.log('Hello ' + this.name);
}
}
var me = new myClass('Andrew');
me.hello();
But you must remember to declare them before they are used. If you use function statement(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) as suggested by Chad Watkins it helps only because of hoisting(http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html) not because of function statement being mandatory for constructors.
The error in your code is in line:
$("#search").on("click", function () {
var isValid = this.testService.validateForm("#container");
you are referencing jQuery object inside a callback not TestView instance, you probably wanted something like this(pun not intended):
...
var self = this;
$("#search").on("click", function () {
var isValid = self.testService.validateForm("#container");
...
I am very new to knockoutjs I got the error "The argument passed when initializing an observable array must be an array,or null,or undefined.I don't have an idea how to solve it.Can any one help me please.
viewModel = function ()
{
var self = this;
self.rows = ko.observableArray([]);
self.items = ko.observableArray(childData.items);
self.otherCharges = ko.observableArray(childData.otherCharges);
self.add = function (type) {
var entry = new Entry({});
entry.SNo(VMRows().length);
entry.Type(type);
self.rows.push(entry);
};
self.remove = function (entry) {
self.rows.remove(entry);
i = 0;
ko.utils.arrayForEach(VMRows, function (e) {
e.SNo(i++);
});
};
};
VM[container] = new viewModel();
var VMRows = VM[container].rows;
The message is very clear: You're passing a value into ko.observableArray that isn't an array, null, or undefined. So that tells us that either childData.items or childData.otherCharges is not an array, not null, and not undefined. At least one of them is some other value. (Obviously I can't tell you which; you haven't show us what childData is.)
For instance I have the following model:
var Volume = function (id, path, isactive) {
var self = this;
self.id = ko.observable(id);
self.path = ko.observable(path);
self.isactive = ko.observable(isactive);
self.Save = function (data) {
//ajax post
}
self.Update = function (data) {
//ajax post
}
}
var ViewModel = function (data) {
var self = this;
self.volumes = ko.observableArray(data.volumes.map(function (item) {
return new Volume(item.id, item.path, item.isActive, item.description);
}));
self.AddVolume = function () {
self.volumes.push(new Volume());
}
}
After Save or Update, I want to refresh the parent ViewModel from Volume model, because some values have changed in the database.
How do I reinitialize the ViewModel?
var viewModel = new ViewModel(ko.utils.parseJson(data) || []);
ko.applyBindings(viewModel);
You can have a function in your parent model which loads the new data and populates new data. Then anywhere you need to get the new data you simply call that function.
Example :
var Volume = function (data) {
var self = this;
self.id = ko.observable(data.id);
self.path = ko.observable(data.path);
self.isactive = ko.observable(data.isactive);
self.Save = function (data) {
//ajax post
//whenever you want to load data again you call viewModel.Load();
}
self.Update = function (data) {
//ajax post
//whenever you want to load data again you call viewModel.Load();
}
}
var ViewModel = function () {
var self = this;
self.volumes = ko.observableArray();
self.Load = function (){
//your ajax call or whatever you do to get the data
self.volumes($.map(data.volumes, function (item) {
return new Volume(item);
}
}
self.AddVolume = function () {
obj = {id:"",path:"",isactive:false}
// need to pass data to Volume model
self.volumes.push(new Volume(obj));
}
}
var viewModel = new ViewModel();
viewModel.Load();
ko.applyBindings(viewModel);
I'd suggest you to have save and update functions in your parent model and use $parent array object in order to reference.
I think you dont need to refresh the parent vm, If you need you can changes the particular index of the array from the value after update. Or call the getall method and push all the values after clearing the old values in the array(but it is not recomended). Or you can refresh the page. Choose wisely
I am trying to return an object method on the event jQuery.change() of a text field,
here is the code:
var Utente = function(indice){
this.Indice = indice;
this.Dati = new Array();
this.initialize = function() {
this.Dati['stato_civile'] = this.getField('stato_civile').val();
this.onChange('stato_civile',this.checkObbligatorieta);
}
this.getField = function(name) {
return $('#'+indice+name);
}
this.onChange = function(field, func) {
this.getField(field).live('change',function() {
return func.apply();
});
}
this.checkObbligatorieta = function() {
this.Dati['stato_civile'] = this.getField('stato_civile').val();
[...]
}
this.initialize();
}
Using this I get the field "#stato_civile" returns the function this.checkObbligatorieta correctly but it gives me an error:
** this.getField('stato_civile').val() is not a function
I think it's something strictly related with the scope, but I can't figure it out.
That's because you're not invoking func() in the same context as the caller, so this is not bound to the same object.
You can fix the problem by passing this to apply():
this.onChange = function(field, func) {
this.getField(field).live("change", function() {
return func.apply(this);
});
};