后处理 Knockout.JS 输入值答案

【问题标题】：Postprocessing an Knockout.JS input value后处理 Knockout.JS 输入值
【发布时间】：2015-01-05 06:03:59
【问题描述】：

我有一个带有剔除值的基本输入字段：

<input type="text" data-bind="value: mytext"/>

但是，在收到“mytext”的值后，我想对我的视图模型执行 som 逻辑。最初我想到了某种后处理事件ala“valueUpdate”，但基本上我只想在“enter”og“space”被击中后运行一个函数。我是否需要编写一个新的 bindingHandler 或者是否有更直接的淘汰赛合适的方式来做到这一点？

基本上，我想要做的是 jquery/autocomplete/multible 和 Ryan Niemeyers 可淘汰排序示例 http://jsfiddle.net/rniemeyer/vgXNX 的组合。

我的是在div.item之后的div.container中，替换了“添加任务”，比如：

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

【问题讨论】：

从字段中丢失焦点是否可以作为事件触发？
您的问题还不清楚。它也可能是XY problem 的一个实例。请更新您的问题，包括更多上下文和代码（例如，实际视图模型逻辑，包括您想使用的“某些逻辑”），最好是您的场景的重现。
@Wayne，我想我可以忍受失去焦点。基本上我希望输入/空间创建一个对象的新实例 - 文本输入是该新对象的属性之一。我想将新实例推送到 ko.observableArray。
@Jeroen，怎么不清楚？我在输入字段中有一个 ko.observable，并且想在空格/输入被击中后进行一些后期处理。
不清楚你的代码是什么样子的，以及为什么你需要这个。有了这些信息和最少的复制（最好包括您已经尝试过的内容以及为什么这些方法不能满足您的需求），它会更容易提供帮助。目前已经有 2 个答案，我可以再想出 5 个从技术上回答这个问题但可能对您没有帮助的答案。

标签： javascript input knockout.js

【解决方案1】：

基本上我只想在“输入”和“空格”被击中后运行一个函数。

您可以使用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}" />

【讨论】：

事件方法解决了我的问题。谢谢！ :) 我添加了对函数的调用，以将标签添加到“handleKey”函数中，从而解决了我的问题。解决方案：jsfiddle.net/AsleG/qbjytqop
@AsleG 提示：如果您也想捕捉光标键，请使用 keyup 而不是 keypress。
我喜欢这样的提示。 :D 谢谢，@Tomalek！
FWIW，我已经更新了你原来的 JSFiddle 并改进了一切。 jsfiddle.net/Tomalak/qbjytqop/29.
哇！谢谢。我要研究那个。同时，我将最初的小提琴更进一步，将 initialTags 作为 jQuery Ui Autocomplete 的一组选项添加到添加标签。你可以在这里看到它：jsfiddle.net/AsleG/qbjytqop 但是它有一个错误：当通过 'enter' 或 'tab' 或 'r-arrow' 添加标签时，它不会设置自动完成中的值，只设置键入的字母。（尝试输入't'，选择'Timetravel'，按下'enter'：它返回一个带有标签't'的标签）