2012-11-27 160 views
1

我是新來的淘汰賽,我找到了一個複選框綁定的例子,可能在我的網站非常有用。 鏈接到這個例子:http://knockoutjs.com/documentation/checked-binding.html淘汰賽「檢查」綁定不工作

我試圖將它應用到我的頁面,但它沒有工作,然後我試圖複製這個例子沒有改變任何東西,但仍然沒有奏效。我在不同的瀏覽器(Chrome,Firefox,IE)上嘗試了它,並且包括不同版本的knockout庫,但仍然無法使用。 我沒有其他想法我做錯了,請幫助!

下面是這個例子的代碼:

<!DOCTYPE html> 
<head> 
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Dokument bez tytułu</title> 
</head> 

<body> 
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 
<div data-bind="visible: wantsSpam"> 
Preferred flavors of spam: 
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div> 
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div> 
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div> 
</div> 

<script type="text/javascript"> 
var viewModel = { 
    wantsSpam: ko.observable(true), 
    spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes 
}; 

// ... then later ... 
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox 
</script> 
</body> 
</html> 

回答

1

你所看到的是一個片段,而不是一個完全工作的例子。你需要做幾件事情。

您需要applyBindings

ko.applyBindings(viewModel); 

而你需要做的DOM加載後(或淘汰賽會很心煩)。

下面是一個example

我已經更新了我的例子一點,使其更容易看到的複選框,事實上,約束。在複選框列表下的垃圾郵件列表將會在您選中並取消選中複選框時發生變化。

+0

對不起,但是,爲什麼你需要'setTimeout'功能? :) – Pavlo

+0

@Pavlo:你沒有。我只是這樣做了,所以你可以看到模型在代碼中被更改的時間,它反映在UI中。我從字面上看了「後來......」這個例子的一部分! –

+0

哦,我的壞,我剛剛錯過了,現在我看到了:)謝謝! – Pavlo