knockoutjs十三 focus checked绑定

knockoutjs十三 focus checked绑定

毕设加上班有点忙，不好意思，今天讲解的时focus和checked绑定，好久没去官网看看，发现他们已经更新了不少东西，这些我以前都没有用过，就找个官方的例子讲解一下。

<input data-bind="hasFocus: isSelected" />
<button data-bind="click: setIsSelected">Focus programmatically</button>
<span data-bind="visible: isSelected">The textbox has focus</span>
<p>
Name:
<b data-bind="visible: !editing(), text: name, click: edit"> </b>
<input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>

<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>
<script>
function Model() {
var self = this;
self.isSelected = ko.observable(false);
self.setIsSelected = function() {
this.isSelected(true)
}
// Data
self.name = ko.observable("jamas");
self.editing = ko.observable(false);

// Behaviors
self.edit = function() {
this.editing(true)
};
}
var model = new Model();
ko.applyBindings(model);
</script>

focus是很简单的，他只是检测一个元素是否选中，yes返回true，no返回false，就这这么简单，你设置true就选中，设置false就不选中。官方的例子是告诉我们可以作为点击编辑，原本是一个文本，点击之后选中他，让他变为input框，这确实是不错的一个用法。我以前没有使用过所以我也想不出还有其他的什么作用。

<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>
function Model() {
var self = this;
self.wantsSpam = ko.observable(true);
self.spamFlavors = ko.observableArray(["cherry", "almond"]);
}
var model = new Model();
ko.applyBindings(model);
</script>

checked 比较有内涵啊 ，官方比较多，而且确实radio和checkbox时比较烦的东西，表单中反选是很恶心的一件事。但是我看到ko的这个很厉害，checkbox设置你需要选中的只需要把他的值放入一个数组，那么他就会帮你选中，简单了我们反选的过程，而且选中的值直接放入一个数组，操作简单。如果是radio只要checked的值是true就会选中，false就不会选中。当然你也可以设施一个非boolean值，那么radio中value和checked的值相等的，就会被选中，简单易懂。

<!-- ko foreach: items -->
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
<span data-bind="text: itemName"></span>
<!-- /ko -->
<script>
function Model() {
var self = this;
self.items = ko.observableArray([{
itemName: 'Choice 1'
}, {
itemName: 'Choice 2'
}]);
self.chosenItems = ko.observableArray();

}
var model = new Model();
ko.applyBindings(model);
</script>

checked绑定还提供了另一个参数checkedValue,这个参数就和checkbox或是radio中的value是一样的，但是这个checkedValue可以设置一个非string的值，可以是一个对象，那么你选中时chosenItems就是一个数组，你可以获取对象中想要的值，但是我发现反选却不容易，因为其中的对象都是引用，想比较他们不是那么容易，在使用时建议使用value设置值。

最后几篇可能有点急躁，有误请联系我qq1357197829，我准备过一段时间把这个系列搬到github pages上了，到时候希望大家赏脸。代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。