后处理 Knockout.JS 输入值
Postprocessing an Knockout.JS input value
我有一个带有剔除值的基本输入字段:
<input type="text" data-bind="value: mytext"/>
但是我想在收到 "mytext" 的值后对我的视图模型执行 som 逻辑。
最初我想到了某种 post 处理事件 ala "valueUpdate",但基本上我只想在 "enter" og "space" 被命中后运行一个函数。我需要编写一个新的 bindingHandler 还是有更直接的适合淘汰赛的方法?
基本上我想做的是 jquery/autocomplete/multible 和 Ryan Niemeyers 淘汰赛排序示例 http://jsfiddle.net/rniemeyer/vgXNX 的组合。
我的是在div.container之后的div.item,替换了"Add task",如:
<div class="container">
<div class="item" data-bind="sortable:{template:'tagsTmpl',data:myTags, allowDrop:true"></div>
<input data-bind="value: mytext, event: {keypress: handleKey}"/>
<!-- Line above replacing this: <a href="#" data-bind="click: $root.addTag">Add Tag</a> -->
</div>
basically I just want to run a function after "enter" og "space" is hit.
您可以使用 event
绑定。
ko.applyBindings({
mytext: ko.observable("initial value"),
handleKey: function(data, event) {
if (event.keyCode == 0x20) {
console.log("Space has been pressed!");
}
return true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: mytext, event: {keypress: handleKey}" />
我有一个带有剔除值的基本输入字段:
<input type="text" data-bind="value: mytext"/>
但是我想在收到 "mytext" 的值后对我的视图模型执行 som 逻辑。 最初我想到了某种 post 处理事件 ala "valueUpdate",但基本上我只想在 "enter" og "space" 被命中后运行一个函数。我需要编写一个新的 bindingHandler 还是有更直接的适合淘汰赛的方法?
基本上我想做的是 jquery/autocomplete/multible 和 Ryan Niemeyers 淘汰赛排序示例 http://jsfiddle.net/rniemeyer/vgXNX 的组合。
我的是在div.container之后的div.item,替换了"Add task",如:
<div class="container">
<div class="item" data-bind="sortable:{template:'tagsTmpl',data:myTags, allowDrop:true"></div>
<input data-bind="value: mytext, event: {keypress: handleKey}"/>
<!-- Line above replacing this: <a href="#" data-bind="click: $root.addTag">Add Tag</a> -->
</div>
basically I just want to run a function after "enter" og "space" is hit.
您可以使用 event
绑定。
ko.applyBindings({
mytext: ko.observable("initial value"),
handleKey: function(data, event) {
if (event.keyCode == 0x20) {
console.log("Space has been pressed!");
}
return true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: mytext, event: {keypress: handleKey}" />