自定义Knockout绑定处理程序不显示绑定

Custom Knockout Binding Handler not showing bindings

本文关键字：绑定 显示 程序 处理 Knockout 自定义      更新时间：2023-09-26

这是我的自定义绑定:

ko.bindingHandlers.alert = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        $(element).attr({ style: "display:none" });
        ko.applyBindingsToNode(element, { with: valueAccessor() }, context);
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor) {
        var data = ko.unwrap(valueAccessor());
        if (data) {
            $(element).attr({ "class": "alert " + ko.unwrap(data.success) });
            $(element).show();
        }
        else
            $(element).hide();
    }
};

这是我传递给绑定的alert对象:

var alertObj = {
    success: "",
    image: "",
    message: ""
};
var initialDataObj = {
    success: "alert-success",
    fail: "alert-danger"
};
var Alert = function (initialData) {
    var self = this;
    self.success = initialData.success;
    self.successImage = initialData.successImage;
    self.fail = initialData.fail;
    self.failImage = initialData.failImage;
    self.setAlert = function (success, message) {
        var alert = {};
        $.extend(alert, alertObj);
        alert.success = success ? self.success : self.fail;
        alert.image = success ? self.successImage : self.failImage;
        alert.message = message;
        return alert;
    };
}

我是这样设置提醒的:

self.alert(alert.setAlert(true, "Role removed"));

这是我的html:

<div class="alert alert-success" data-bind="alert: $root.alert">
    <img data-bind="attr: { src: $root.image }" alt="" width="16" style="float: left;">
    <p style="float: left; margin-left: 10px;" data-bind="text: $root.message"></p>
    <div style="clear: both;">
    </div>
</div>

它目前为警报选择正确的类，但它不显示图片或文本，在某个地方绑定丢失了

通过简单的逻辑$root是不必要的，当你获得访问image和message，因为绑定上下文内的警报块是.setAlert返回的alert对象

<div class="alert alert-success" data-bind="alert: $root.alert">
    <img data-bind="attr: { src: image }" alt="" width="16" style="float: left;">
    <p style="float: left; margin-left: 10px;" data-bind="text: message"></p>
    <div style="clear: both;"></div>
</div>

肯定会有帮助的

相关文章：