2012-11-27 106 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