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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -