淘汰赛：自动推送数组答案

【问题标题】：Knockout: automatic push for an array淘汰赛：自动推送数组
【发布时间】：2017-09-19 07:33:33
【问题描述】：

我有一个像这样绑定到一个可观察数组的 div：

<div data-bind="foreach: currentSelected().Tags " contenteditable="true">
    <span data-bind="text:$data"></span>
</div>

我使 div 的内容可编辑，以便任何更改（用户输入）都反映在 Tags 数组中，但这并不像我想象的那样工作。可观察数组似乎没有自动推送。我的问题是，如何使用绑定在 Tags 数组中获取新值？

这是我设置 currentSelected 的方式：

var newBlogEntry = new NewBlogEntry();
var newBlogEntryObservable = new NewBlogEntryObservable(newBlogEntry);
self.currentSelected(newBlogEntryObservable);

NewBlogEntry 的函数如下：

function NewBlogEntry()
{
    return { "Id": 0, "Title": "Title", "Description": "Description", "Tags": [] };
}

【问题讨论】：

至少相关：stackoverflow.com/questions/19370098/… 你当然不能在 within contenteditable 元素中进行绑定，你必须使元素可编辑，然后映射回 @ 987654325@改的时候...
参考相关的帖子答案，我的情况是什么内容？会是 currentSelected().Tags 吗？

标签： javascript knockout.js binding

【解决方案1】：

我设法通过添加一个额外的输入字段来解决问题：

<input type="text" placeholder="new tag" data-bind="value:newTag, valueUpdate: 'afterkeydown', enterkey: addNewTag" id="addTag" />

回车键的绑定如下：

ko.bindingHandlers.enterkey = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var callback = valueAccessor();
        $(element).keypress(function (event) {
        var keyCode = (event.which ? event.which : event.keyCode);
        if (keyCode === 13) {
            callback.call(viewModel);
            return false;
        }
        return true;
    });
    }
};

这是 newTag 的 observable：

self.newTag = ko.observable();
self.addNewTag = function () {
    if (self.newTag() == '')
        alert("Enter something in input field");
    else {
        var tag = self.newTag();
        self.currentSelected().Tags.push(tag);
        $("#addTag").val("");
    }
}

【讨论】：