knockout.js - Knockout use function with mapping plugin and data binding -

i have same question knockout.js - javascript function on data-bind use mapping plugin.

this viewmodel , mapping:

var viewmodel = ko.mapping.fromjs(data); viewmodel.fromunixts = function (uts) {     var date = new date(uts * 1000);     var hours = date.gethours();     var minutes = date.getminutes();     var seconds = date.getseconds();     return hours + ':' + minutes + ':' + seconds; }; ko.applybindings(viewmodel); 

and html binding:

<tbody data-bind="foreach: $root">     <tr class="gv">         <td data-bind="text: id"></td>         <td data-bind="text: number"></td>         <td data-bind="text: fromunixts(date_time())"></td>     </tr> </tbody> 

also tried:

• <td data-bind="text: fromunixts(date_time)"></td>
• <td data-bind="text: $root.fromunixts(date_time())"></td>
• <td data-bind="text: $root.fromunixts(date_time)"></td>
• <td data-bind="text: date_time"></td> works not formatted datetime

and

• viewmodel.prototype.fromunixts = function (uts) {

the error keep getting is: fromunixts not defined or not found. besides solution, bit more context mistake. did wrong , why etc.

you have several issues. here's 2 cts.

1. not biggie, it's clearer if structure data in way top-level isn't array itself, object array, e.g. { items: [/* original data here*/] }.

2. with mvvm pattern it's best not put logic in view, , text: fromunixts(date_time()) borders that. instead, put logic on view model , have text: unixtx binding. works around problematic code in question surrounding prototype stuff.

3. if want augment view models created mapping plugin, can creating mapping options allow tweak model upon creation.

4. finally, problem prevents others helping you: question contains irrelevant code (the jquery ajax stuff) making harder understand things, , examples incomplete , invalid snippets (unclosed tags, etc). in addition, ask many questions in one, creating large question (almost review request) users tend shy away from.

if put (at least 1-3), i'd suggest different approach following. update view this:

<table>     <tbody data-bind="foreach: items">         <tr class="gv">             <td data-bind="text: id"></td>             <td data-bind="text: number"></td>             <td data-bind="text: unixts"></td>         </tr>     </tbody> </table> 

no logic there.

then, assuming following data:

var data = {     items: [{id: 1, number:  42, date_time: 1375948769449},             {id: 2, number: 106, date_time: 1375948769349}] }; 

i'd construct view model using mapping plugin this:

var mapping = {     'items': {         create: function (item) {             return new itemviewmodel(item.data);         }     } };  var viewmodel = ko.mapping.fromjs(data, mapping, {}); 

this uses itemviewmodel constructor function augments mapped vm unixts observable:

var itemviewmodel = function (data) {     var self = this;     ko.mapping.fromjs(data, {}, self);     this.unixts = ko.computed(function () {         var date = new date(self.date_time());         var hours = date.gethours();         var minutes = date.getminutes();         var seconds = date.getseconds();         return hours + ':' + minutes + ':' + seconds;     }); }; 

you can see @ work in this fiddle. hope helps.

---

if can't change structure of data server, can still use augmented view model version. few changes:

// data not augmented, raw array op gets service var data = [{id: 1,number: 42,date_time: 1375948769449},             {id: 2,number: 106,date_time: 1375948769349}];  // augment data object make clearer view model: var viewmodel = ko.mapping.fromjs({items: data}, mapping, {}); 

see this fiddle.