站长资源 网络编程

KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

整理:jimmy2026/8/31浏览2次

简介textInput绑定目的textInput绑定主要用于或者

元素。他提供了DOM和viewmodel的双向更新。不同于value绑定，textinput绑定是实时更新的。例如：源码：<p>Login name: <input data-bind="textInp</div>
                <div class="news_infos"><div id="MyContent"><p><strong>textInput绑定目的</strong></p>
<p>textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定，textinput绑定是实时更新的。</p>
<p>例如：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011112644749.png');"><img src="/UploadFiles/2021-04-02/20161011112644749.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">
<p>Login name: <input data-bind="textInput: userName" /></p>
<p>Password: <input type="password" data-bind="textInput: userPassword" /></p></pre>
</div>

<p>ViewModel:</p>

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

<p><strong>备注1：textInput绑定 VS value绑定</strong></p>
<p>虽然value结合也可以进行双向文本框和视图模型性能的结合，但是博主更喜欢textInput，因为他是实时更新的。value绑定与textInput绑定的主要的区别在于：</p>
<p><strong>即时更新</strong></p>
<p>value默认情况下，只有当用户将焦点从文本框移开后才会更新您的模型。textInput每次击键或其他文本输入时立刻更新模型。</p>
<p><strong>浏览器的事件处理</strong></p>
<p>不同的浏览器有着文本输入机制，如剪切，拖动，或接受自动完成建议的事件在不同的浏览器中机制是不一致。value绑定，有额外的选项，如valueUpdate: afterkeydown获得对特定事件的更新，但是有可能不兼容所有的浏览器。</p>
<p>textInput结合是专门用来处理各种浏览器的不同机制，即使在应对不同的文字输入机制也能保持一致和直接更新模型。</p>
<p>不要尝试使用value和textInput在相同的元素上进行绑定。</p>
<p><strong>hasFocus绑定目的</strong></p>
<p>hasFocus绑定是视图模型属性与DOM元素的焦点状态绑定。它是一个双向绑定，所以：</p>
<p>如果您的视图模型属性设置为true或者false，相关的元素将成为聚焦的或未聚焦。<br>
如果用户手动对焦或unfocuses相关元件，所述视图模型属性将被设置为true或false相应。<br>
如果您正在构建中，编辑元素动态显示复杂的形式，你想控制，用户应该开始打字，或插入符的响应位置，这是非常有用的。</p>
<p><strong>示例1</strong></p>
<p>这个例子中当文本框当前具有焦点时则显示消息，并可以使用一个按钮通过编程方式触发焦点。</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011112805571.png');"><img src="/UploadFiles/2021-04-02/20161011112805571.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">
<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></pre>
</div>

<p><strong>示例2</strong></p>
<p>因为hasFocus绑定是双向绑定，这可以使切换的“编辑”模式更加便捷。</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011112842177.png');"><img src="/UploadFiles/2021-04-02/20161011112842177.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">
<p>
Name: 
<b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</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></pre>
</div>

<p><strong>checked绑定目的</strong></p>
<p>checked绑定主要用于复选框（<input type='checkbox'>）或单选按钮（<input type='radio'>） 并与视图模型属性进行绑定。</p>
<p>当用户更改了表单控件，这将更新您的视图模型属性的值。同样，当您更新您的视图模型的值，也将直接反映到表单控件上。</p>
<p>注意：对于文本框，下拉列表，以及所有以非可勾选表单控件，需要使用value绑定或者textInput绑定读写元素的值，而不是checked绑定。</p>
<p><strong>示例1：复选框绑定</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011112932056.png');"><img src="/UploadFiles/2021-04-02/20161011112932056.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">
<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></pre>
</div>

<p><strong>示例2：多复选框附带数组绑定</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011113018514.png');"><img src="/UploadFiles/2021-04-02/20161011113018514.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">
<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></pre>
</div>

<div class="htmlcode">
<pre class="brush:js;">
<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></pre>
</div>

<p><strong>参数</strong></p>
<p><strong>主要技术参数</strong></p>
<p>KO设置元素的选中状态，以配合您的参数值。任何以前选中的状态将被覆盖。您的参数被解释的方式取决于你绑定元素是什么类型：</p>
<p>对于复选框，当参数值true时KO将设置为元素为选中状态，当它为false则为未选中状态。如果你给定的不是一个布尔值，KO会松散地解释。这意味着，非零数字和非null对象和非空字符串都将被解释为true，而零，null，undefined，和空字符串将被解释为false。</p>
<p>当用户选中或取消选中该复选框，将KO你的模型属性设置为true或false。</p>
<p>如果你的参数解析为一个被给予array数组。在这种情况下，KO将设置检查DOM中value属性是否与数组值匹配，如果值匹配则被选中，如果不匹配则不勾选。</p>
<p>当用户选中或取消选中该复选框，将KO更改对应视图模型属性的值。就像示例2一样。</p>
<p>对于单选按钮，KO将检查视图模型的值是否等于单选按钮DOM节点的value属性或检查视图模型属性值是否等于checkedValue参数指定的值。就像示例3一样。</p>
<p>当选择了用户改变其单选按钮，KO会设置模型属性值为选定的单选按钮的值。像示例3中，点击value="cherry"的单选按钮后将设置viewModel.spamFlavor为"cherry"。</p>
<p>如果你的参数是监控属性类型，每当值改变绑定将更新元素的选中状态。如果该参数是非监控属性，它只会在首次运行时设置元素的选中状态，以后再不会更新。</p>
<p><strong>其他参数</strong></p>
<p>checkedValue</p>
<p>checkedValue参数定义了使用值与checked绑定结合，而不是元素的value属性。如果你想要的值是一个字符串（如整数或对象）以外的东西，或者你想动态设置的值，这非常有用。</p>
<p>例如下边的例子：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20161011113158410.png');"><img src="/UploadFiles/2021-04-02/20161011113158410.png" alt="KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>源码：</p>

<div class="htmlcode">
<pre class="brush:js;">

<input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
<span data-bind="text: itemName"></span>

<script type="text/javascript">
var viewModel = {
items: ko.observableArray([
{ itemName: 'Choice 1' },
{ itemName: 'Choice 2' }
]),
chosenItems: ko.observableArray()
};
</script></pre>
</div>

<p>如果你的checkedValue参数是一个监控属性，当值的变化和元素是否被选中，绑定将更新checked模型属性。对于复选框，它会从数组删除旧值并添加新的价值。对于单选按钮，它只会更新模型值。</p>
<p>以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！</p></div>
</div>
            </div>
            <div class="share"> </div>
            <div class="nextinfo">
                <p>上一篇：<a href="http://m.paidiu.com/show/1/104875.html" title="Bootstrap轮播插件使用代码">Bootstrap轮播插件使用代码</a></p>
                <p>下一篇：<a href="http://m.paidiu.com/show/1/104877.html" title="JavaScript获取URL中参数querystring的方法详解">JavaScript获取URL中参数querystring的方法详解</a></p>
            </div>
            <div class="otherlink">
                <h2>最新资源</h2>
                <ul>
                     
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619123.html" one-link-mark="yes" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.87MB]"><span>群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619122.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[320K/MP3][43.91MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619121.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FLAC/分轨][140.49MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619120.html" one-link-mark="yes" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]"><span>【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619119.html" one-link-mark="yes" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]"><span>贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619118.html" one-link-mark="yes" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]"><span>小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619117.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]"><span>群星《欢迎来到我身边 电影原声专辑》[320K/MP3</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619116.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]"><span>群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619115.html" one-link-mark="yes" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]"><span>雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</span></a>
</li>
 
<li>
   <i class="iconfont icon-point"></i>
   <a class="text-sm" href="/show/1/619114.html" one-link-mark="yes" title="群星《2024好听新歌42》AI调整音效【WAV分轨】"><span>群星《2024好听新歌42》AI调整音效【WAV分轨】</span></a>
</li>

</ul>
            </div>
        </div>
        <div class="sidebar">
            
            <div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
        </div>
    </article>
    <footer>
        <p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a></p>
        <p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
    </footer>
    <script src="/images/nav.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        var elm = jQuery('#left_flow2');
        var startPos = jQuery(elm).offset().top;
        jQuery.event.add(window, "scroll", function() {
            var p = jQuery(window).scrollTop();
            jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');

jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
        });
    });
    </script>
</body>

</html>