发布于 2017-07-17 21:05:26 | 16 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定的相关资料,需要的朋友可以参考下

textInput绑定目的

textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。

例如:

源码:


<p>Login name: <input data-bind="textInput: userName" /></p>
<p>Password: <input type="password" data-bind="textInput: userPassword" /></p>

ViewModel:


<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
<script>
ko.applyBindings({
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc") // Prepopulate
});
</script>

备注1:textInput绑定 VS value绑定

虽然value结合也可以进行双向文本框和视图模型性能的结合,但是博主更喜欢textInput,因为他是实时更新的。value绑定与textInput绑定的主要的区别在于:

即时更新

value默认情况下,只有当用户将焦点从文本框移开后才会更新您的模型。textInput每次击键或其他文本输入时立刻更新模型。

浏览器的事件处理

不同的浏览器有着文本输入机制,如剪切,拖动,或接受自动完成建议的事件在不同的浏览器中机制是不一致。value绑定,有额外的选项,如valueUpdate: afterkeydown获得对特定事件的更新,但是有可能不兼容所有的浏览器。

textInput结合是专门用来处理各种浏览器的不同机制,即使在应对不同的文字输入机制也能保持一致和直接更新模型。

不要尝试使用value和textInput在相同的元素上进行绑定。

hasFocus绑定目的

hasFocus绑定是视图模型属性与DOM元素的焦点状态绑定。它是一个双向绑定,所以:

如果您的视图模型属性设置为true或者false,相关的元素将成为聚焦的或未聚焦。
如果用户手动对焦或unfocuses相关元件,所述视图模型属性将被设置为true或false相应。
如果您正在构建中,编辑元素动态显示复杂的形式,你想控制,用户应该开始打字,或插入符的响应位置,这是非常有用的。

示例1

这个例子中当文本框当前具有焦点时则显示消息,并可以使用一个按钮通过编程方式触发焦点。

源码:


<input data-bind="hasFocus: isSelected">
<button data-bind="click: setIsSelected">Focus programmatically</button>
<span data-bind="visible: isSelected">The textbox has focus</span> 
<script>
var viewModel = {
isSelected: ko.observable(false),
setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel,document.getElementById("eq2"));
</script>

示例2

因为hasFocus绑定是双向绑定,这可以使切换的“编辑”模式更加便捷。

源码:


<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 PersonViewModel(name) {
// Data
this.name = ko.observable(name);
this.editing = ko.observable(false);
// Behaviors
this.edit = function() { this.editing(true) }
}
ko.applyBindings(new PersonViewModel("Bert Bertington"),document.getElementById("eq3"));
</script>

checked绑定目的

checked绑定主要用于复选框(<input type='checkbox'>)或单选按钮(<input type='radio'>) 并与视图模型属性进行绑定。

当用户更改了表单控件,这将更新您的视图模型属性的值。同样,当您更新您的视图模型的值,也将直接反映到表单控件上。

注意:对于文本框,下拉列表,以及所有以非可勾选表单控件,需要使用value绑定或者textInput绑定读写元素的值,而不是checked绑定。

示例1:复选框绑定

源码:


<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true) // Initially checked
};
// ... then later ...
viewModel.wantsSpam(false); // The checkbox becomes unchecked
</script>

示例2:多复选框附带数组绑定

源码:


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

示例3:单选按钮

源码:


<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
};
// ... then later ...
viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>

参数

主要技术参数

KO设置元素的选中状态,以配合您的参数值。任何以前选中的状态将被覆盖。您的参数被解释的方式取决于你绑定元素是什么类型:

对于复选框,当参数值true时KO将设置为元素为选中状态,当它为false则为未选中状态。如果你给定的不是一个布尔值,KO会松散地解释。这意味着,非零数字和非null对象和非空字符串都将被解释为true,而零,null,undefined,和空字符串将被解释为false。

当用户选中或取消选中该复选框,将KO你的模型属性设置为true或false。

如果你的参数解析为一个被给予array数组。在这种情况下,KO将设置检查DOM中value属性是否与数组值匹配,如果值匹配则被选中,如果不匹配则不勾选。

当用户选中或取消选中该复选框,将KO更改对应视图模型属性的值。就像示例2一样。

对于单选按钮,KO将检查视图模型的值是否等于单选按钮DOM节点的value属性或检查视图模型属性值是否等于checkedValue参数指定的值。就像示例3一样。

当选择了用户改变其单选按钮,KO会设置模型属性值为选定的单选按钮的值。像示例3中,点击value="cherry"的单选按钮后将设置viewModel.spamFlavor为"cherry"。

如果你的参数是监控属性类型,每当值改变绑定将更新元素的选中状态。如果该参数是非监控属性,它只会在首次运行时设置元素的选中状态,以后再不会更新。

其他参数

checkedValue

checkedValue参数定义了使用值与checked绑定结合,而不是元素的value属性。如果你想要的值是一个字符串(如整数或对象)以外的东西,或者你想动态设置的值,这非常有用。

例如下边的例子:

源码:


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

如果你的checkedValue参数是一个监控属性,当值的变化和元素是否被选中,绑定将更新checked模型属性。对于复选框,它会从数组删除旧值并添加新的价值。对于单选按钮,它只会更新模型值。

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!



相关阅读 :
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
KnockoutJS 3.X API 第四章之表单value绑定
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
KnockoutJS 3.X API 第四章之数据控制流with绑定
KnockoutJS 3.X API 第四章之数据控制流component绑定
第四章之BootStrap表单与图片
JavaScript ECMA-262-3 深入解析.第三章.this
JavaScript CSS 修改学习第四章 透明度设置
JavaScript DOM学习第四章 getElementByTagNames
JavaScript Event学习第四章 传统的事件注册模型
JavaScript 中级笔记 第四章 闭包
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务