javascript - KnockoutJS newly added element does not have any styling from the stylesheet -
i'm trying use knockout, similar page: http://knockoutjs.com/examples/carteditor.html
however, when used jquery mobile theme - when select item category drop down, adds drop down list under product heading - second dropdown added, doesn't have mobile styling applied.
i've added fiddle here: http://jsfiddle.net/mtait/adnur/1927/ - demonstrate. can add add styling new drop down list?
function formatcurrency(value) { return "$" + value.tofixed(2); } var cartline = function() { var self = this; self.category = ko.observable(); self.product = ko.observable(); self.quantity = ko.observable(1); self.subtotal = ko.computed(function() { return self.product() ? self.product().price * parseint("0" + self.quantity(), 10) : 0; }); // whenever category changes, reset product selection self.category.subscribe(function() { self.product(undefined); }); }; var cart = function() { // stores array of lines, , these, can work out grandtotal var self = this; self.lines = ko.observablearray([new cartline()]); // put 1 line in default self.grandtotal = ko.computed(function() { var total = 0; $.each(self.lines(), function() { total += this.subtotal() }) return total; }); // operations self.addline = function() { self.lines.push(new cartline()) }; self.removeline = function(line) { self.lines.remove(line) }; self.save = function() { var datatosave = $.map(self.lines(), function(line) { return line.product() ? { productname: line.product().name, quantity: line.quantity() } : undefined }); alert("could send server: " + json.stringify(datatosave)); }; }; ko.applybindings(new cart());
thank you,
mark
i think need customer binding handler.
handler:
ko.bindinghandlers.jqmoptions = { update: function (element, valueaccessor, allbindingsaccessor, context) { ko.bindinghandlers.options.update(element, valueaccessor, allbindingsaccessor, context); $(element).selectmenu(); $(element).selectmenu("refresh", true); } };
binding:
<select data-bind='jqmoptions : sampleproductcategories, optionstext: "name", optionscaption: "select...", value: category'> </select>
fiddle: http://jsfiddle.net/adnur/1942/
Comments
Post a Comment