繁体   English   中英

用于ko-js和jquery mobile的奇数textInput数据绑定

Odd textInput data-binding for ko-js and jquery mobile

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我看到一个很奇怪的问题。 我正在使用ko-js在jQuery移动应用程序中对某些表单域进行数据绑定。 我已成功使用selects和flipswitch绑定了所有其他字段,但是input type =“ text元素未将viewText的必填字段上的inputText绑定。如果我绑定到viewmodel中的另一个字段,它将正确显示/更新。

所以如果与

<input type="text" data-bind="textInput: controlData, attr:{'id': ftId()}" >

输入中没有任何值,但是如果我绑定

<input type="text" data-bind="textInput: label, attr:{'id': ftId()}" >

它完美地工作

更完整的HTML摘录:

<div data-role="content" data-theme="a">
  <div id="container">
    <div data-bind="foreach: formFields">
      <div data-role="fieldcontain" data-bind="visible: isFieldText()">
        <label data-bind="for: ftId(), text: label()"></label>
        <input type="text" data-bind="textInput: controlData, attr:{'id': ftId()}" >                                          
      </div>
      <div data-role="fieldcontain" data-bind="visible: isFieldCheckbox()">
        <label data-bind="for: cbId(), text: label()"></label>
        <input type="checkbox" data-role="flipswitch" data-bind="attr: {'id': cbId(), 'data-on-text': dataOnText(), 'data-off-text': dataOffText()}, checked:controlData" /> <!--data-wrapper-class="custom-size-flipswitch"-->        
      </div>            
      <div data-role="fieldcontain" data-bind="visible: isFieldSelect()">
        <label data-bind="for: selectId(), text: label()"></label>
        <select data-bind="attr: {'id': selectId()}, options: options, value: controlData"></select>
      </div>
    </div>
  </div>
    </div>

Viewmodel和applyBindings代码

var formFieldViewModel = function (data, target, parent) {
var _this = this;
this.isFieldText = ko.computed(function() {
return _this.controlType() === "text" ? true : false;
});
this.isFieldCheckbox = ko.computed(function() {
return _this.controlType() === "checkbox" ? true : false;
});
this.isFieldSelect = ko.computed(function() {
return _this.controlType() === "select" ? true : false;
});
this.ftId = ko.computed(function() {
return 'ft_'+_this.index();
});
this.cbId = ko.computed(function() {
return 'cb_'+_this.index();
});
this.selectId = ko.computed(function() {
return 'select_'+_this.index();
});
//-- Call mapping function --//
ko.mapping.fromJS(data, target, this);
};

这是JSON对象-JSON在JSONlint上进行验证

{"formFields":[{"index":0,"label":"experiment description","controlData":"dummy","controlType":"text","dataOffText":"","dataOnText":"","options":[]},{"index":1,"label":"odd S1 Label","controlData":"scottish","controlType":"text","dataOffText":"","dataOnText":"","options":[]},{"index":2,"label":"even S1 Label","controlData":"english","controlType":"text","dataOffText":"","dataOnText":"","options":[]},{"index":3,"label":"use 3P classic","controlData":false,"controlType":"checkbox","dataOffText":"no","dataOnText":"yes","options":[]},{"index":4,"label":"subject","controlData":"National identity","controlType":"select","dataOffText":"","dataOnText":"","options":["Sexuality","Religion","Race \u0026 Culture","National identity","Immigrant culture - football","Gender"]},{"index":5,"label":"country","controlData":"United Kingdom","controlType":"select","dataOffText":"","dataOnText":"","options":["Afghanistan","Albania","Algeria","American Samoa","Andorra","Angola","Anguilla","Antarctica","Antigua and Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Bouvet Island","Brazil","British Indian Ocean Territory","Brunei Darussalam","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Christmas Island","Cocos (Keeling) Islands","Colombia","Comoros","Congo","Congo, the Democratic Republic of the","Cook Islands","Costa Rica","Cote D\u0027Ivoire","Croatia","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands (Malvinas)","Faroe Islands","Fiji","Finland","France","French Guiana","French Polynesia","French Southern Territories","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guadeloupe","Guam","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Heard Island and Mcdonald Islands","Holy See (Vatican City State)","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran, Islamic Republic of","Iraq","Ireland","Israel","Italy","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Kiribati","Korea, Democratic People\u0027s Republic of","Korea, Republic of","Kuwait","Kyrgyzstan","Lao People\u0027s Democratic Republic","Latvia","Lebanon","Lesotho","Liberia","Libyan Arab Jamahiriya","Liechtenstein","Lithuania","Luxembourg","Macao","Macedonia, the Former Yugoslav Republic of","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Martinique","Mauritania","Mauritius","Mayotte","Mexico","Micronesia, Federated States of","Moldova, Republic of","Monaco","Mongolia","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauru","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Niue","Norfolk Island","Northern Mariana Islands","Norway","Oman","Pakistan","Palau","Palestinian Territory, Occupied","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Pitcairn","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russian Federation","Rwanda","Saint Helena","Saint Kitts and Nevis","Saint Lucia","Saint Pierre and Miquelon","Saint Vincent and the Grenadines","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Georgia and the South Sandwich Islands","Spain","Sri Lanka","Sudan","Suriname","Svalbard and Jan Mayen","Swaziland","Sweden","Switzerland","Syrian Arab Republic","Taiwan, Province of China","Tajikistan","Tanzania, United Republic of","Thailand","Timor-Leste","Togo","Tokelau","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Turks and Caicos Islands","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","United States Minor Outlying Islands","Uruguay","Uzbekistan","Vanuatu","Venezuela","Viet Nam","Virgin Islands, British","Virgin Islands, U.s.","Wallis and Futuna","Western Sahara","Yemen","Zambia","Zimbabwe"]},{"index":6,"label":"language","controlData":"English","controlType":"select","dataOffText":"","dataOnText":"","options":["Afrikaans","Albanian","Arabic","Armenian","Basque","Bengali","Bulgarian","Catalan","Cambodian","Chinese (Mandarin)","Croation","Czech","Danish","Dutch","English","Estonian","Fiji","Finnish","French","Georgian","German","Greek","Gujarati","Hebrew","Hindi","Hungarian","Icelandic","Indonesian","Irish","Italian","Japanese","Javanese","Korean","Latin","Latvian","Lithuanian","Macedonian","Malay","Malayalam","Maltese","Maori","Marathi","Mongolian","Nepali","Norwegian","Persian","Polish","Portuguese","Punjabi","Quechua","Romanian","Russian","Samoan","Serbian","Slovak","Slovenian","Spanish","Swahili","Swedish","Tamil","Tatar","Telugu","Thai","Tibetan","Tonga","Turkish","Ukranian","Urdu","Uzbek","Vietnamese","Welsh","Xhosa"]},{"index":7,"label":"location","controlData":"Southampton","controlType":"select","dataOffText":"","dataOnText":"","options":["Cardiff","Bournemouth","Upsalla","Rotterdam","Madrid","Southampton","Trondheim","Port Elizabeth","Cape Town","Helsinki","Pisa","Wroclaw","Palermo","Budapest","Malaga","Magaluth","Caerdydd","Glamorgan","Granada","Geneva","Berlin"]}]}
问题暂未有回复.您可以查看右边的相关问题.
1 KO.js关于模式控制的数据绑定问题

嗨,大家好,我正在寻找与我的基因敲除问题有关的一些帮助。 一切都始于ko.applyBindings(viewModel)在ko.applyBindings(viewModel)我一个错误,而没有其他人说与在同一元素上调用多个绑定有关的事情。 通过查看文档,我很快使用ko.apply ...

2 IE的KO(knockoutjs)数据绑定问题

我有一个特定于IE的奇怪问题(我检查了以IE8、9和10开头的多个版本), 我的模型记录被相乘 (即,如果我有2条记录,则显示2X2 = 4,如果3则3X3 = 9) 。 我有一个简单的Grid,它与我的viewModel绑定,该ViewModel在加载页面后通过getJson获取。 这是代 ...

3 @ Html.ActionLink与ko数据绑定

首先,可以将@Html.ActionLink与敲除绑定一起使用吗? 如果可以,我该怎么写? 这就是我需要的: 简而言之,它呈现时应如下图所示: https://plus.google.com/photos/105612417165831662125/albums/5 ...

5 将常量或参数传递给KO.js中的数据绑定单击函数

我想实现一个菜单。 菜单中的每个按钮都应在模型中设置菜单ID。 我试图用这种方式来做,但是没有用: 而是在页面加载时调用selectUi。 我现在想到的唯一可能的解决方案是为每个按钮实现一个功能。 那是正确的方法吗? ...

6 Grails中的数据绑定奇数

在grails中,我尝试将数据绑定到命令对象,但是遇到一个奇怪的问题,其中字符串后缀将自动(无提示)被剥离掉一个数字。 例如: 这将呈现false,并且myInt将设置为123。但是,如果我尝试将myInt设置为“ asdf123”,则cmd.hasErrors()将返回true。 ...

2012-09-27 22:03:48 1 187   grails
7 jQuery / JS简单数据绑定用于动态控件

我在html页面上有和通过js动态创建的元素。 我想从输入到跨度进行文本绑定。 因此,我使用下一个JS: 可能全部在一行jquery中,但是...无论如何。 在输入要输入的文本期间,此绑定工作正常。 但是一旦输入失去焦点-突然跨度就会失去内部文本。 我不知道为什么 ...

8 带有大量可观察到的单页应用程序的KO-JS内存泄漏

我注意到,在使用ko组件的单页应用程序上使用ko js可观察变量(或者我做错了)时,似乎存在内存泄漏。 基本上,我从对REST API的ajax调用(约2000个项目的数组)中获得了大量数据。 将它们存储在本地并转换为可观察对象以进行操作/查看。 当用户导航到另一个页面时,内存量保持不 ...

10 KO数据绑定“文本:”到带有参数的函数

是否可以通过任何方式进行以下操作而不必通过临时可观察值/已计算可观察值? 我有用于查找以显示数据的通用数据: 结果:执行了函数,找到了参数,逻辑确定,并且返回了计算出的全名,但未显示(可能是因为没有观察到) 结果:未解析contactId,因此看不到正确的参数值。 我想让 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM