mediator - KnockoutJS: components binding, working with objects as data type -
i'm new knockout js , find library powerful, quite hard understand sometimes. documentation hudge, it's (too) small code snippets, it's difficult have big picture, unless coding style & philosophy paradigm same ko developers.
i come angular world, , i'm used have array each item object properties (id, name, etc). when click button, "send" object new component render in form.
i'm sure i'm missing obvious, don't understand how make things work, plugins ko.mapping , ko.postbox.
does can me find solution? in working code above, i've posted 3 specific questions in javascript area.
edit: answered them, don't know if it's best practice or not.
var // user class give each property observable capacity user = function (rawdata) { var self = this, data = rawdata || {}; self.id = ko.observable(data.id); self.name = ko.observable(data.name); }, // list component. in separate file // (small modifs can in same file demo) cmplist = { viewmodel: function () { var self = this; self.users = ko.observablearray([ new user({id: 1, name: 'john'}), new user({id: 2, name: 'jack'}), new user({id: 3, name: 'smith'}) ]); // #answer 1: initialize postbox event self.user = ko.observable(new user()).publishon('useredit'); self.showedit = function (user) { // #question 1: how send object // users-form component. ko.postbox? // #answer 1: change observable self.user(user); console.log('show', user); }; }, template: '' + '<ul data-bind="foreach: users">' + '<li>' + '<button data-bind="click: $parent.showedit">edit</button>' + ' <span data-bind="text: name"></span>' + '</li>' + '</ul>' }, // form component, in separate file // (small modifs can in same file demo) cmpform = { viewmodel: function () { var self = this; // #question 2: how recept object sent // list? // #answer 2: make observable subscribe event self.user = ko.observable(new user()).subscribeto('useredit'); self.save = function () { // #question 3: how notify users-list cmp // object has changed? ko.postbox? window.alert('save ' + ko.tojson(self.user())); console.log('save'); }; }, // #answer 2: call user() parenthesis access properties template: '' + '<form>' + '<p>edit user <span data-bind="text: user().name"></span> ' + 'with id <span data-bind="text: user().id"></span></p>' + '<input data-bind="textinput: user().name" />' + '<button data-bind="click: save">save</button>' + '</form>' }; // ko bootstrap, in 3rd file // (small modifs can in same file demo) ko.components.register('users-list', cmplist); ko.components.register('users-form', cmpform); ko.applybindings({});ul { border: 1px solid blue; list-style: none; float: left; } li { border: 1px solid green; } form { border: 1px solid red; float: right; margin-top: 20px; } ul, li, form { padding: 5px; }<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-postbox/0.5.2/knockout-postbox.min.js"></script> </head> <body> <users-list></users-list> <users-form></users-form> </body> </html>
Comments
Post a Comment