0

このページのように、KnockOut を使用しようとしています: http://knockoutjs.com/examples/cartEditor.html

ただし、JQuery Mobile テーマと一緒に使用すると、[カテゴリ] ドロップダウンから項目を選択すると、[製品] 見出しの下にドロップダウン リストが追加されますが、追加されたばかりの 2 番目のドロップダウンにはモバイル スタイルが適用されません。

ここに Fiddle を追加しました: http://jsfiddle.net/mtait/adNuR/1927/ - デモ用。スタイルを新しいドロップダウン リストに追加するには、何を追加できますか?

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 the category changes, reset the product selection
self.category.subscribe(function() {
    self.product(undefined);
});
};

var Cart = function() {
// Stores an array of lines, and from these, can work out the grandTotal
var self = this;
self.lines = ko.observableArray([new CartLine()]); // Put one line in by 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 now send this to server: " + JSON.stringify(dataToSave));
};
};

ko.applyBindings(new Cart());

ありがとうございました、

マーク

4

1 に答える 1

1

顧客バインディングハンドラーが必要だと思います。

ハンドラ：

ko.bindingHandlers.jqmOptions = {
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, context);
        $(element).selectmenu();
        $(element).selectmenu("refresh", true);
    }
};

バインディング:

<select data-bind='jqmOptions : sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select>

フィドル: http://jsfiddle.net/adNuR/1942/

于 2013-08-27T13:38:48.693 に答える