javascript - Knockout pushing observable and computed data to an observable array -
i trying push multiple data (firstname , lastname), along when compute firstname , lastname , try push data in same array thrown error. below code.
viewmodel:
var viewmodel = function () { var self = this; self.gameofthrones = ko.observablearray ([ {firstname: 'jon', lastname: 'snow'}, {firstname: 'robb', lastname: 'stark'} ]); self.firstname = ko.observable(''); self.lastname = ko.observable(''); (var i=0; i<self.gameofthrones().length; i++) { self.gameofthrones()[i].fullname = ko.computed (function () { return self.gameofthrones()[i].firstname+" "+self.gameofthrones()[i].lastname; }) }; $('#classic').click( function() { self.gameofthrones.push( {firstname: $('#fn').val(), lastname: $('#pr').val()} ); }); } ko.applybindings(new viewmodel()); html view:
<form class="" action="index.html" method="post"> <input type="text" name="name" data-bind="value: firstname" id="fn"> <input type="text" name="name" data-bind="value: lastname" id="pr"> <button id="classic" type="button" name="submit">submit</button> </form> <div data-bind="foreach: gameofthrones"> firstname: <span data-bind="text: firstname"></span><br> lastname: <span data-bind="text: lastname"></span><br> fullname: <span data-bind="text: fullname"></span><br><br> </div> i new knockout js , stuck @ point there way show computed firstname , lastname in observable array. in advance.
if add fullname computed function each object of gameofthrone array, need same when push new object array default won't have one.
there many ways accomplish this, think simplest create function full name outside observable array of gameofthrone. use $parent call function inside foreach.
var viewmodel = function () { var self = this; self.gameofthrones = ko.observablearray ([ {firstname: 'jon', lastname: 'snow'}, {firstname: 'robb', lastname: 'stark'} ]); self.getfullname = function(name){ return name.firstname + " " + name.lastname; } } ko.applybindings(new viewmodel());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: gameofthrones"> firstname: <span data-bind="text: firstname"></span><br> lastname: <span data-bind="text: lastname"></span><br> fullname: <span data-bind="text: $parent.getfullname($data) "></span><br><br> </div>
Comments
Post a Comment