jQuery和淘汰賽，與數字框相關的複選框

我有一個複選框列表，單擊時隱藏並顯示一個數字框。下面是工作的的jsfiddle：http://jsfiddle.net/bjornmann/yXUqf/3/jQuery和淘汰賽，與數字框相關的複選框

的基本思路是：

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

然後我說：「讓我們學會淘汰賽，這整個應用程序移動到該框架」所以這是當底部下降出。

我有一個項目列表（複選框）推送到一個數組，然後在視圖中的ko foreach，，但我迷失在如何添加數字框中的數據。

我有一段時間搞清楚如何將輸入的值綁定到數組中的複選框的值。

來源

2012-12-10 Bjorn2Run

我不知道下投票是什麼，但如果你需要我做出更一般的，我可以...... – Bjorn2Run

我認爲它非常糟糕的形式向下投票沒有理由！對我來說這似乎是一個很好的問題。 –

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-11 07:39:51

謝謝！這讓我以全新的方式思考淘汰賽。教程很好，但範圍有限，這增加了一些清晰度。 – Bjorn2Run

jQuery和淘汰賽，與數字框相關的複選框

回答

相關問題