Editing table rows using knockout
1,564 views
Skip to first unread message
benard ochieng
May 15, 2012, 3:43:29 PM5/15/12
to KnockoutJS
Hello Ryan,
I have been following your blog-post on how to edit a table row,but I
am getting an error message saying that the "selectedItem()" is not a
function even though i have declared it as observable in the view
model..Please have a look at my code attached below and help me know
what is actually wrong with my code.I am following your blog to solve
this problem,but it seems there is something am not getting right:
View:
<body>
<table class="table1" border="1" width="30%">
<thead>
<tr>
<th>Identificador</th>
<th>Nome</th>
<th>Descricao</th>
<th>Unidade</th>
<th>Hora-Inicial</th>
<th>Periodicidade</th>
<th></th>
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach:
pagedRows}">
</tbody>
</table>
<script id="itemsTmpl" type="text/html">
<tr>
<td data-bind="text: identificador"></td>
<td data-bind="text: nome"></td>
<td data-bind="text: descricao"></td>
<td data-bind="text: unidade"></td>
<td data-bind="text: hora_init"></td>
<td data-bind="text: period_cid"></td>
<td class="buttons">
<button data-bind="click :function()
{IndicadoresViewModel.prototype.editItem($data)}">Edit</button>
</td>
</tr>
</script>
<script id="editTmpl" type="text/html">
<tr>
<td><input data-bind="value: identificador"/></td>
<td><input data-bind="value: nome"/></td>
<td><input data-bind="value: descricao"/></td>
<td><input data-bind="value: unidade"/></td>
<td><input data-bind="value: hora_init"/></td>
<td><input data-bind="value: period_cid"/></td>
<td class="buttons">
<button data-bind="click :function()
{IndicadoresViewModel.prototype.acceptItemEdit()}">Edit</button>
<button data-bind="click :function()
{IndicadoresViewModel.prototype.cancelItemEdit()}">Cancel</button>
</td>
</tr>
</script>
</body>
</html>
ViewModel:
ko.protectedObservable=function(initialValue){
//private variables
var _temp= initialValue;
var _actual=ko.observable(initailValue);
var result = ko.computed({
read:function(){
return _actual;
},
write:function(newValue){
_temp = newValue;
}
});
//commit the temporary value to the observale, if is different
result.commit = function() {
if (_temp !== _actual()) {
_actual(_temp);
}
};
//notify subscribers to update their values with the original
result.reset = function() {
_actual.valueHasMutated();
_temp = _actual();
};
return result;
};
function
TableItem(identificador,nome,descricao,unidade,hora_init,period_cid){
this.identificador=ko.protectedObservable(identificador);
this.nome=ko.protectedObservable(nome);
this.descricao=ko.protectedObservable(descricao);
this.unidade=ko.protectedObservable(unidade);
this.hora_init=ko.protectedObservable(hora_init);
this.period_cid=ko.protectedObservable(period_cid);
}
function IndicadoresViewModel(){
this.tableItems = ko.observableArray([]),
this.selectedItem=ko.observable(),
IndicadoresViewModel.prototype.editItem =function (tableItem) {
this.selectedItem=ko.observable();
this.selectedItem(tableItem);
}
IndicadoresViewModel.prototype.acceptItemEdit=function() {
this.selectedItem().identificador.commit();
this.selectedItem().nome.commit();
this.selectedItem().descricao.commit();
this.selectedItem().unidade.commit();
this.selectedItem().hora_init.commit();
this.selectedItem().period_cid.commit();
this.selectedItem(null);
}
IndicadoresViewModel.prototype.cancelItemEdit=function() {
this.selectedItem().identificador.reset();
this.selectedItem().nome.reset();
this.selectedItem().descricao.reset();
this.selectedItem().unidade.reset();
this.selectedItem().hora_init.reset();
this.selectedItem().period_cid.reset();
this.selectedItem(null);
};
IndicadoresViewModel.prototype.templateToUse=function(tableItem) {
this.selectedItem=ko.observable();
return IndicadoresViewModel.prototype.selectedItem ===
tableItem ? "editTmpl" : "itemsTmpl";
};
}
$(function(){
ko.applyBindings(new IndicadoresViewModel());
})
What do you think i am doing wrong here in my code?
Thanks,
Benard
I have been following your blog-post on how to edit a table row,but I
am getting an error message saying that the "selectedItem()" is not a
function even though i have declared it as observable in the view
model..Please have a look at my code attached below and help me know
what is actually wrong with my code.I am following your blog to solve
this problem,but it seems there is something am not getting right:
View:
<body>
<table class="table1" border="1" width="30%">
<thead>
<tr>
<th>Identificador</th>
<th>Nome</th>
<th>Descricao</th>
<th>Unidade</th>
<th>Hora-Inicial</th>
<th>Periodicidade</th>
<th></th>
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach:
pagedRows}">
</tbody>
</table>
<script id="itemsTmpl" type="text/html">
<tr>
<td data-bind="text: identificador"></td>
<td data-bind="text: nome"></td>
<td data-bind="text: descricao"></td>
<td data-bind="text: unidade"></td>
<td data-bind="text: hora_init"></td>
<td data-bind="text: period_cid"></td>
<td class="buttons">
<button data-bind="click :function()
{IndicadoresViewModel.prototype.editItem($data)}">Edit</button>
</td>
</tr>
</script>
<script id="editTmpl" type="text/html">
<tr>
<td><input data-bind="value: identificador"/></td>
<td><input data-bind="value: nome"/></td>
<td><input data-bind="value: descricao"/></td>
<td><input data-bind="value: unidade"/></td>
<td><input data-bind="value: hora_init"/></td>
<td><input data-bind="value: period_cid"/></td>
<td class="buttons">
<button data-bind="click :function()
{IndicadoresViewModel.prototype.acceptItemEdit()}">Edit</button>
<button data-bind="click :function()
{IndicadoresViewModel.prototype.cancelItemEdit()}">Cancel</button>
</td>
</tr>
</script>
</body>
</html>
ViewModel:
ko.protectedObservable=function(initialValue){
//private variables
var _temp= initialValue;
var _actual=ko.observable(initailValue);
var result = ko.computed({
read:function(){
return _actual;
},
write:function(newValue){
_temp = newValue;
}
});
//commit the temporary value to the observale, if is different
result.commit = function() {
if (_temp !== _actual()) {
_actual(_temp);
}
};
//notify subscribers to update their values with the original
result.reset = function() {
_actual.valueHasMutated();
_temp = _actual();
};
return result;
};
function
TableItem(identificador,nome,descricao,unidade,hora_init,period_cid){
this.identificador=ko.protectedObservable(identificador);
this.nome=ko.protectedObservable(nome);
this.descricao=ko.protectedObservable(descricao);
this.unidade=ko.protectedObservable(unidade);
this.hora_init=ko.protectedObservable(hora_init);
this.period_cid=ko.protectedObservable(period_cid);
}
function IndicadoresViewModel(){
this.tableItems = ko.observableArray([]),
this.selectedItem=ko.observable(),
IndicadoresViewModel.prototype.editItem =function (tableItem) {
this.selectedItem=ko.observable();
this.selectedItem(tableItem);
}
IndicadoresViewModel.prototype.acceptItemEdit=function() {
this.selectedItem().identificador.commit();
this.selectedItem().nome.commit();
this.selectedItem().descricao.commit();
this.selectedItem().unidade.commit();
this.selectedItem().hora_init.commit();
this.selectedItem().period_cid.commit();
this.selectedItem(null);
}
IndicadoresViewModel.prototype.cancelItemEdit=function() {
this.selectedItem().identificador.reset();
this.selectedItem().nome.reset();
this.selectedItem().descricao.reset();
this.selectedItem().unidade.reset();
this.selectedItem().hora_init.reset();
this.selectedItem().period_cid.reset();
this.selectedItem(null);
};
IndicadoresViewModel.prototype.templateToUse=function(tableItem) {
this.selectedItem=ko.observable();
return IndicadoresViewModel.prototype.selectedItem ===
tableItem ? "editTmpl" : "itemsTmpl";
};
}
$(function(){
ko.applyBindings(new IndicadoresViewModel());
})
What do you think i am doing wrong here in my code?
Thanks,
Benard
rpn
May 15, 2012, 4:08:38 PM5/15/12
to knock...@googlegroups.com
Hi Benard-
Take a look at this fiddle:
http://jsfiddle.net/rniemeyer/qjZPW/. Hopefully, you can reconcile this with your code to come up with a solution.
Thanks-
Ryan
benard ochieng
May 16, 2012, 1:31:13 PM5/16/12
to KnockoutJS
Hello Ryan,
This is really great,...Once again thank you very much for you good
work you are doing to help newBy like me to go deep into the knockout
world,..infact I am now your follower on twitter...Please keep up with
your good work here!
Best Regards,
Benard
Reply all
Reply to author
Forward
0 new messages