in this fiddle there is an add timing button. There is default row having week day dropdown,from time textfield,to time textfield and hospital drop down.Now when I click on the add timing button I want another row having week day dropdown,from time textfield,to time textfield and hospital dropdown.
Can any body please tell me how to do that?
This is my knockout code
var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
this.id = ko.observable(id);
this.day = ko.observable(day);
this.fromtime = ko.observable(fromtime);
this.totime = ko.observable(totime);
this.hospital = ko.observable(hospital);
this.hospitalId = ko.observable(hospitalId);
};
var Patientp = function () {
this.id = ko.observable(idValue);
this.name = ko.observable(nameValue);
this.degree = ko.observable(degreeValue);
this.gender = ko.observable(genderValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.username = ko.observable(usernameValue);
this.password = ko.observable(passwordValue);
this.email = ko.observable(emailValue);
this.mobile = ko.observable(mobileValue);
this.imgFile = ko.observable(imgFileValue);
this.imgSrc = ko.observable(imgSrcValue);
this.imagePath = ko.observable(imagePathValue);
this.userid = ko.observable(useridValue);
this.department = ko.observable(departmentValue);
//this.consultant= ko.observableArray(consultantArrValue);
//this.consultant= ko.observable(consultantValue);
this.addSlot = function (doctor) {
var docSchedule = new DocSchedule();
iter = iter + 1;
docSchedule.id(iter);
}
}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
//these fields are not available
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null; //'${currentpatient.user.name}';
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';
var iter = 0;
var patp = new Patientp();
ko.applyBindings(patp);
You don't have observableArray schedules in Patientp doctor.schedules.push(docSchedule);
throws Uncaught TypeError: Cannot read property 'push' of undefined
Try this:
var iter = 0;
var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
this.id = ko.observable(id);
this.day = ko.observable(day);
this.fromtime = ko.observable(fromtime);
this.totime = ko.observable(totime);
this.hospital = ko.observable(hospital);
this.hospitalId = ko.observable(hospitalId);
};
var Patientp = function () {
this.id = ko.observable(idValue);
this.name = ko.observable(nameValue);
this.degree = ko.observable(degreeValue);
this.gender = ko.observable(genderValue);
this.username = ko.observable(usernameValue);
this.password = ko.observable(passwordValue);
this.email = ko.observable(emailValue);
this.mobile = ko.observable(mobileValue);
this.imgFile = ko.observable(imgFileValue);
this.imgSrc = ko.observable(imgSrcValue);
this.imagePath = ko.observable(imagePathValue);
this.userid = ko.observable(useridValue);
this.department = ko.observable(departmentValue);
this.schedulers = ko.observableArray([]);
}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null;
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';
function vm() {
var self = this;
self.person = new Patientp();
self.schedule = new DocSchedule();
self.schedules = ko.observableArray([new DocSchedule(iter)]);
self.addSlot = function () {
console.log('added');
iter++;
var docSchedule = new DocSchedule(iter);
self.schedules.push(docSchedule);
};
self.removeSlot = function () {
console.log('removed');
self.schedules.remove(this);
}
};
var viewModel = new vm();
ko.applyBindings(viewModel, document.getElementById('addDoctorSchedules'));
Here is the Demo
Related
When I used getFullName, getFirstName and getLastName work ok, but I can't use set functions setFullName, setLastName, setFirstName. My code:
var Person = function(firstAndLast) {
var fn=firstAndLast.split(' ');
var fstr=fn.join(' ');
var frn=fn[0];
var lsn=fn[1];
this.getFullName=function(){return fstr;};
this.getFirstName=function(){return frn;};
this.getLastName=function(){return lsn;};
this.setFirstName=function(a){fn[0]=a;};
this.setLastName=function(b){fn[1]=b;};
this.setFullName=function(c){fn=c.split(' ');};
};
What about this:
var Person = function(firstAndLast) {
var self = this;
this.fn = firstAndLast.split(' ');
this.frn = this.fn[0];
this.lsn = this.fn[1];
this.getFullName=function(){return self.fn.join(' ');};
this.getFirstName=function(){return self.frn;};
this.getLastName=function(){return self.lsn;};
this.setFirstName=function(a){self.frn=a; self.fn[0]=a;};
this.setLastName=function(b){self.lsn=b; self.fn[1]=b;};
this.setFullName=function(c){
self.fn = c.split(' ');
self.frn = this.fn[0];
self.lsn = this.fn[1];};
};
See this fiddle
If you have a lot of Person objects, you should consider moving the getter/setter functions to the class prototype:
var Person = function(firstAndLast) {
this.fn = firstAndLast.split(' ');
this.frn = this.fn[0];
this.lsn = this.fn[1];
};
Person.prototype.getFullName = function() {
return this.fn.join(' ');
}
Person.prototype.getFirstName = function() {
return this.lsn;
}
Person.prototype.getLastName = function() {
return this.lsn;
}
Person.prototype.setFirstName = function(a) {
this.frn=a;
this.fn[0]=a;
}
Person.prototype.setLastName = function(b) {
this.lsn=b;
this.fn[1]=b;
}
Person.prototype.setFullName = function(c) {
this.fn = c.split(' ');
this.frn = this.fn[0];
this.lsn = this.fn[1];
}
See updated fiddle
I changed the Human Prototype and now I am still getting undefined when I check a property:
function Human() {
this.name = "Default Human";
this.age = "Default Age";
this.height = 122;
}
function humanExtend() {
this.address = "Updated Address Sun";
this.power = "ShowBoat";
}
var banmeet = new Human();
console.log(banmeet.name);
Human.prototype = humanExtend;
var bradPitt = new Human();
console.log(bradPitt.power);
But I am getting an undefined for bradPitt.power..
Why is that?
you should have been assigned instance of HumanExtend as below -
function Human() {
this.name = "Default Human";
this.age = "Default Age";
this.height = 122;
}
function humanExtend() {
this.address = "Updated Address Sun";
this.power = "ShowBoat";
}
var banmeet = new Human();
console.log(banmeet.name);
//Assign instance of HumanExtend here
Human.prototype = new humanExtend();
var bradPitt = new Human();
console.log(bradPitt.power);
i have one class i am trying to overwrite it with factory design pattern but not able to do that..
how to call it exactly to change the properties of object
function othername() {
var newobj = new Object();
newobj.fname = "sachin",
newobj.lname = "rawal",
newobj.fullname = function () {
alert(this.fname);
}
return newobj
}
var othername1 = othername ("hi","hello");
Using prototype you can do it.
function othername() {
var newobj = new Object();
newobj.fname = "sachin",
newobj.lname = "rawal",
newobj.fullname = function () {
alert(this.fname);
}
return newobj
}
var othername1 = othername ("hi","hello");
prototype:
othername.prototype.middleName = "middleNameString";
var named = othername();
var md = named.middleName // md == "middleNameString"
function Othername(fname,lname) {
this.fname = fname || "sachin";
this.lname = lname || "rawal";
};
Othername.prototype.fullname = function (){
alert(this.fname + " " + this.lname);
};
var othernameDefault = new Othername (); //sachin rawal
var othername1 = new Othername ("hi","hello"); //hi hello
Below is simple angular factory which almost works. I want to reset my model and I tried to add a method called 'resetModel' but it doesn't work as It is not resetting the model properties. Could someone please explain why?
app.factory('programLocationModel', [ "$rootScope", function ($rootScope)
{
var ProgramLocationModel = function()
{
this.name = "All Programmes";
this.description = "";
this.category = "";
this.series = {};
this.channel = {};
this.duration = "";
this.airTime = "";
this.seriesName = "";
this.url = "../assets/images/nhkw_thumbnail.jpg"; //Default client logo
}
ProgramLocationModel.prototype.update = function( data )
{
this.name = data.name;
this.description = data.description;
this.category = data.category;
this.series = data.series;
this.seriesName = data.seriesName;
this.channel = data.channel;
this.duration = data.duration;
this.airTime = data.airTime;
this.url = $rootScope.resturl + '/graph/' + data.id + '/thumbnail?access_token=' + $rootScope.token;
}
ProgramLocationModel.prototype.resetModel = function () {
ProgramLocationModel();
}
return new ProgramLocationModel();
} ] );
Your resetModel function is only calling the constructor and not doing anything to the actual instance the method is called on. Your resetModel function is supposed to modify the properties of this, just like you already do in the constructor and in your update method.
Here is a simple way to do it:
app.factory('programLocationModel', [ "$rootScope", function ($rootScope)
{
var ProgramLocationModel = function()
{
this.resetModel();
}
ProgramLocationModel.prototype.update = function( data )
{
this.name = data.name;
this.description = data.description;
this.category = data.category;
this.series = data.series;
this.seriesName = _seriesName;
this.channel = data.channel;
this.duration = data.duration;
this.airTime = data.airTime;
this.url = $rootScope.resturl + '/graph/' + data.id + '/thumbnail?access_token=' + $rootScope.token;
}
ProgramLocationModel.prototype.resetModel = function () {
this.name = "All Programmes";
this.description = "";
this.category = "";
this.series = {};
this.channel = {};
this.duration = "";
this.airTime = "";
this.seriesName = "";
this.url = "../assets/images/nhkw_thumbnail.jpg"; //Default client logo
}
return new ProgramLocationModel();
} ] );
Let's say I have three objects like this:
var registryEpisode = function() {
var self = this;
self.registry = ko.observable(new registry());
self.episodeType = ko.observable(new episodeType());
};
var episodeType = function() {
var self = this;
self.id = ko.observable(""),
self.name = ko.observable("");
};
var registry = function() {
var self = this;
self.id = ko.observable(""),
self.name = ko.observable("");
};
Then I have a view model like this:
var vm = function() {
var self = this;
self.registryEpisodeTypes = ko.observableArray([new registryEpisode()]);
self.addRegistryEpisodeType = function (episodeType, registry) {
var regEpisode = new registryEpisode();
regEpisode.registry = registry;
regEpisode.episodeType = episodeType;
self.registryEpisodeTypes.push(regEpisode);
} .bind(this);
}
I'm trying to bind the view model to a table of dropdown lists and have the view model updated each time a registry and episode type is selected, but I need to maintain the relationship between episodesTypes and registries. Thoughts?
Here is a simple implemantion of a chain dropDownLists: jsFiddle
var registryEpisode = function() {
var self = this;
self.registry = ko.observable(new registry());
self.episodeType = ko.observable(new episodeType());
};
var episodeType = function(id, name) {
var self = this;
self.id = ko.observable(id), self.name = ko.observable(name);
};
var registry = function() {
var self = this;
self.id = ko.observable(""), self.name = ko.observable("");
};
var vm = function() {
var self = this;
self.selectedRegistry = ko.observable("");
self.registryEpisodeTypes = ko.observableArray([]);
self.addRegistryEpisodeType = function(episodeType, registry) {
var regEpisode = new registryEpisode();
regEpisode.registry = registry;
regEpisode.episodeType = episodeType;
self.registryEpisodeTypes.push(regEpisode);
}.bind(this);
self.getRegistries = function() {
var hashCheck = {};
var result = ko.observableArray([]);
ko.utils.arrayMap(self.registryEpisodeTypes(), function(item) {
if (hashCheck["" + item.registry.id()] === null || hashCheck["" + item.registry.id()] === undefined) {
hashCheck["" + item.registry.id()] = item.registry.name();
result.push({
"name": item.registry.name(),
"value": item.registry.id()
});
}
});
return result;
}
self.getEpisodes = ko.dependentObservable(function() {
var ret = self.registryEpisodeTypes();
var selectedRegistryItem = self.selectedRegistry();
if (selectedRegistryItem === null || selectedRegistryItem === undefined || selectedRegistryItem === "")
return ;
var result = ko.observableArray([]);
ko.utils.arrayMap(ret, function(item) {
if (item.registry.id() == selectedRegistryItem) result.push({
"name": item.episodeType.name(),
"value": item.episodeType.id()
});
});
console.log(ko.toJSON(result));
return result;
});
}
var viewModel = new vm();
var breakingBad = new registry();
breakingBad.id("1000");
breakingBad.name("Breaking Bad");
viewModel.addRegistryEpisodeType(new episodeType("1", "E1-breakingBad"), breakingBad);
viewModel.addRegistryEpisodeType(new episodeType("2", "E2-breakingBad"), breakingBad);
viewModel.addRegistryEpisodeType(new episodeType("3", "E3-breakingBad"), breakingBad);
var trueBlood = new registry();
trueBlood.id("1001");
trueBlood.name("True Blood");
viewModel.addRegistryEpisodeType(new episodeType("1", "E1-trueBlood"), trueBlood);
viewModel.addRegistryEpisodeType(new episodeType("2", "E2-trueBlood"), trueBlood);
viewModel.addRegistryEpisodeType(new episodeType("3", "E3-trueBlood"), trueBlood);
ko.applyBindings(viewModel);
<div>
<span data-bind="text:selectedRegistry"></span>
</div>
<div>
<select data-bind="options:getRegistries(),optionsText:'name',optionsValue:'value',value:selectedRegistry"></select>
</div>
<div>
<select data-bind="options:getEpisodes(),optionsText:'name',optionsValue:'value'"></select>
</div>
I create a dependentObservable called getEpisodes. Whenever selectedRegistry changes this episodeList calculated again.