0

クリックするとナンバーボックスを非表示および表示するチェックボックスのリストがあります。その作業のJSfiddleは次のとおりです：http://jsfiddle.net/bjornmann/yXUqf/3/

基本的な考え方は次のとおりです。

$('.numberthing').each(function(){push the data to an array here.})

それから「ノックアウトを学んで、このアプリ全体をそのフレームワークに移動させましょう」と言ったので、底が落ちたのです。

配列にプッシュする項目 (チェックボックス) のリストと、ビュー内の ko foreach がありますが、ナンバー ボックスからデータを追加する方法がわかりません。

入力の値をノックアウトの配列のチェックボックスの値にバインドする方法を考え出すのに非常に苦労しています。

4

1 に答える 1

0

KOのバインディングは双方向です。ビューモデルを更新すると、UIが更新されます。バインドされたコントロールを更新すると、ビューモデルが更新されます。

計算されたプロパティを作成することもできます。これは、参照されているオブザーバブルが更新されるたびに更新されます。

function ViewModel(data) {
    data = data || {};
    this.checkboxes = ko.observableArray(
        ko.utils.arrayMap(data.checkboxes, function (title) {
            return new CheckboxModel(title);
        })
    );
    this.checkedCheckboxes = ko.computed(function () {
        return ko.utils.arrayFilter(this.checkboxes(), function (cb) {
            return cb.checked();
        });
    }, this);
}

function CheckboxModel(title) {
    this.title = ko.observable(title);
    this.checked = ko.observable(false);
    this.number = ko.observable(1);
}

$(function() {
    ko.applyBindings(new ViewModel({
        checkboxes: [ 'Champion', 'Reserve champion',
            '1st', '2nd', '3rd', '4th', '5th', '6th',
            '7th', '8th', '9th', '10th', 'Other']
    }));
});
​    ​

<div data-bind="foreach: checkboxes" id="cblist">
    <label data-bind="visible: checked">
        <input type="number" data-bind="value: number"/>
        <span data-bind="text: title"></span>
    </label>
    <label data-bind="visible: !checked()">
        <input type="checkbox" data-bind="checked: checked"/>
        <span data-bind="text: title"></span>
    </label>
    <br/>
</div>

http://jsfiddle.net/MizardX/zHTRP/

于 2012-12-11T07:39:51.583 に答える