jquery - Pre-generate HTML elements using knockout based on available data -

jquery - Pre-generate HTML elements using knockout based on available data -

i have database saves products , categories (each category belongs 1 product , each product has many categories)

to take input have html form creating new records populated using knockoutjs

class="snippet-code-js lang-js prettyprint-override">var productlist = [{ id: 1, name: 'product1', categories: [{ id: 1, name: 'category1' }, { id: 2, name: 'category2' }] }, { id: 2, name: 'product2', categories: [{ id: 3, name: 'category3' }, { id: 4, name: 'category4' }] },{ id: 3, name: 'product3', categories: [{ id: 5, name: 'category5' }, { id: 6, name: 'category6' }] }] function product(productlist) { var self = self.productlist = productlist self.selectedproduct = ko.observable() self.selectedcategories = ko.observable() self.categorylist = ko.computed(function() { var product = self.selectedproduct(); var filtered = ko.utils.arrayfirst(self.productlist, function(p) { if (p.id == product) { homecoming p } }); if (!filtered) { homecoming [] } else { homecoming filtered.categories; } }) } function productviewmodel() { var self = self.products = ko.observablearray([new product(productlist)]) self.addproduct = function() { self.products.push(new product(productlist)) }.bind(self) self.removeproduct = function(product) { self.products.remove(product) } } ko.applybindings(new productviewmodel()) class="snippet-code-html lang-html prettyprint-override"><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: products'> <label>product</label> <select data-bind="attr: {name: 'products['+$index()+']'}, options: productlist, optionscaption: 'select product', optionstext: 'name', optionsvalue: 'id', value: selectedproduct"></select> <div data-bind='with: selectedproduct'> <label>categories</label> <select class='categories-select' data-bind="attr: {name: 'categories['+$index()+'][]', multiple: 'multiple'}, options: $parent.categorylist, optionstext: 'name', optionsvalue: 'id', value: $parent.selectedcategories"></select> </div> </div> <a href='#' data-bind='click: addproduct'> add together </a>

now want create similar html form fetches info backend , pre generates existing values in similar layout. note there might multiple sets of such dropdown boxes in info fetched. want product , categories selected per values.

the json might like:

var productlist = [{ id: 1, name: 'product1', selected: true, categories: [{ id: 1, name: 'category1' selected: true }, { id: 2, name: 'category2' }] }, { id: 2, name: 'product2', selected: true, categories: [{ id: 3, name: 'category3', selected: true }, { id: 4, name: 'category4', selected: true }] },{ id: 3, name: 'product3', categories: [{ id: 5, name: 'category5' }, { id: 6, name: 'category6' }] }]

ok, sounds you're trying fill knockout templates on server. can utilize jsdom , knockout in nodejs directly. if server isn't nodejs, you'd have create nodejs server , phone call through api. you'd pass in template , data, pass out html. problem slow.

if sense you're lone doing these crazy things knockout on server, don't worry, you're in company: other people trying utilize same templating language on server on client. knockoff cool because parses bare minimum knockout template syntax you're utilize on server, leaves rest of syntax intact can utilize on client, , blazing fast.

jquery html knockout.js