1

我是淘汰赛的新手，我发现了一个复选框绑定示例，这在我的网站中可能非常有用。示例链接：http: //knockoutjs.com/documentation/checked-binding.html

我试图将它应用到我的页面但它不起作用，然后我尝试复制这个示例而不进行任何更改，但它仍然不起作用。我在不同的浏览器（Chrome、Firefox、IE）上尝试过，包括不同版本的淘汰库，但仍然没有用。我不知道我做错了什么，请帮忙！

下面是这个例子的代码：

<!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>
4

1 回答 1

1

您正在查看的是一个片段，而不是一个完整的示例。你需要做几件事。

你需要applyBindings：

ko.applyBindings(viewModel);

并且您需要在 DOM 加载后执行此操作（否则淘汰赛会变得非常不安）。

这是一个例子

我已经稍微更新了我的示例，以便更容易看到复选框实际上是绑定的。复选框列表下有一个 spamFlavors 列表，当您选中和取消选中复选框时会发生变化。

于 2012-11-27T20:52:43.357 回答