基于textInput的自定义挖空绑定

时间:2014-08-21 13:15:04

标签: javascript knockout.js

我对自定义绑定有一个特定的要求,我不确定如何实现。

我想使用新的textInput绑定,但遗憾的是它与我使用的占位符polyfill不兼容。我一直在keyup上使用valueUpdate的值绑定,但我喜欢textInput也可以处理的许多边缘情况。

我的要求是,在值等于占位符属性值的情况下,viewmodel应该有一个空字符串。

这是JSBin比较当前和基于textInput的方法,在IE8等浏览器中打开它以查看差异。

修改

试图重新解释这个问题。问题来自敲除将输入字段的值绑定到viewmodel和输入的polyfill,通过将空输入字段替换为等于占位符属性的值(几乎所有polyfill对占位符采用的方法)。

以前我一直在使用值绑定并在keyUp事件上使用valueUpdate。这意味着绑定的viewmodel属性会更新为某人类型。由于polyfill替换了模糊事件中JS中的值,因此输入字段将具有占位符属性的值,但viewModel值仍将是空字符串。

textInput绑定更复杂但更有用,但是polyfill替换空输入值也会触发kn​​ockout更新。由于textInput处理的复杂性和边缘情况重用了keyUp上的旧方法valueUpdate不是一个选项。我想要的是创建一个像textInput这样的绑定,但是知道这样的polyfill。

基本上如果我有

<input data-bind="placeholderTextInput:query" type="text" placeholder="Search..."/>

viewModel = {
    query: ko.observable('');
}

绑定应该正常工作,但是input.value === input.attribute['placeholder']然后viewModel.query() === ''

1 个答案:

答案 0 :(得分:0)

... Ug的

免责声明:目前我无法轻松访问IE8 ......

我知道的最好,没有简单的解决方案。

我知道两个选项:

选项1:查找其他占位符填写

这是我要采取的方法。找到一些实际上没有填写文本框的内容,但会在其上删除另一个元素。

选项2:使用计算

如果您坚持使用该特定占位符库,则需要创建一个计算值,暂时将其称为query2

query2的计算函数中,让它访问query的值,然后将其与placeholder属性进行比较。如果匹配,请返回"",否则返回query