尝试在自定义绑定初始化中调用 viewmodel 函数答案

【问题标题】：Trying to call viewmodel function in custom binding init尝试在自定义绑定初始化中调用 viewmodel 函数
【发布时间】：2016-12-21 14:50:48
【问题描述】：

我对使用 KO 很陌生。我试图在自定义绑定的 init 部分中调用我的视图模型中的一个函数。搜索后我没有找到太多帮助。问题是当我在输入字段中按 Tab 键时出现此错误：TypeError: viewModel.addLine is not a function。我的另一个问题是，我应该在enterPress 之后放什么？现在我只是放一个对我没有任何作用的随机字符串。

HTML：

<input data-bind="value: retail, valueUpdate: 'afterkeydown', enterPress: 'addRow'" class="form-control" />

KO 视图模型：

var itemsModel = function(items) {
    var self = this;
    self.items = ko.observableArray(items);

    self.addLine = function() {
        self.items.push({
            itemNo: "",
            brocCode: "",
            itemDesc: "",
            retail: ""
        });
    };

    self.removeItem = function(item) {
        self.items.remove(item);
    };

};

以及自定义绑定功能：

ko.bindingHandlers.enterPress = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        element.addEventListener('keydown', function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13 || keyCode === 9) {
                console.log("hit enter!");
                console.log(element);
                console.log(valueAccessor);
                console.log(allBindingsAccessor);
                console.log(viewModel);
                viewModel.addLine();
                return false;
            }
            return true;
        });
    }
};

这两段代码都在$(document).ready(function () { 函数之外。

更新

忘记了你们要问的这件作品。以下是设置 HTML 后调用的其余代码：

function GetItems() {        
    var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems));
    var viewModel = new itemsModel(itemsJSON);
    ko.applyBindings(viewModel);
}

【问题讨论】：

你是如何应用绑定的？ viewModel 将是 KO 对该元素具有的任何绑定上下文。因此，如果它在 foreach 或其他东西中，它会有所不同。
它似乎有效。见小提琴：jsfiddle.net/sL1cjgsL。可能你忘了通过new 创建viewModel？ 注意：不推荐使用 viewModel。 使用 bindingsContext.$root。见：knockoutjs.com/documentation/custom-bindings.html
第二个问题的答案：您可以将参数留空：data-bind="enterPress,someOtherBinding,value: var"。
@TarwirdurTuron：谢谢！ bindingsContext.$root.addLine() 为我工作！不知道为什么 viewModel.addLine() 不起作用。

标签： knockout.js

【解决方案1】：

您可以绑定任何 ViewModel 的功能并通过valueAccessor() 访问它，不是吗？

看起来效果不错……

var itemsModel = function(items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.retail = ko.observable("");

    self.addItem = function() {
    	if ("" === self.retail()) return;
        self.items.push(self.retail());
        self.retail("");
    };

    self.removeItem = function(item) {
        self.items.remove(item);
    };

};

ko.bindingHandlers.enterPress = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        element.addEventListener('keydown', function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13 || keyCode === 9) {
                console.log("hit enter!");
                // viewModel.addItem();
                valueAccessor()();
                return false;
            }
            return true;
        });
    }
};

ko.applyBindings(new itemsModel([ "Item1", "Item2", "Item3" ]))

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

<input data-bind="value: retail, valueUpdate: 'afterkeydown', enterPress: addItem" class="form-control" />

<ul data-bind="foreach: items">
    <li>
        <span data-bind="click: $root.removeItem">[x]</span>
        <span data-bind="text: $data"></span>
    </li>
</ul>

【讨论】：