Question

在我看来，我想使用淘汰赛显示状态消息。用户必须等待很长时间，我想向用户显示这些消息正在发生什么（并且还在发生什么）。

为此，我创建了一个函数showStatusMessage，可以从应用程序中的任何位置调用该函数以显示状态消息。但是，这不起作用，因为我可以在控制台property is not defined

中看到错误消息

function showStatusMessage(message) {
    var node = $("#statusTemplate");
    ko.cleanNode(node[0]);
    ko.applyBindings(new StatusMessageTemplate(message), node[0]);
}

function StatusMessageTemplate(message) {
    var self = this;

    self.visible = message.isVisible;
    self.statusText = message.statusText;

    self.hide = function() {
        self.visible(false);
    }
}

当我想显示新的状态消息时，我想像这样调用showStatusMessage函数：

showStatusMessage({
    isVisible: true,
    statusText: "Loading your data, please wait..."
});

我的模板如下：

<div id="statusTemplate" data-bind="visible: visible">
    <span data-bind="text: statusText"></span>
</div>

在showStatusMessage和StatusMessageTemplate函数中，我都可以输出message的值，所以这不是问题。加载模板时没有可用数据，这似乎是一个计时问题。当我从模板中删除所有的“数据绑定”属性时，控制台中没有错误。

Answer 1

在您的 self.hide 函数中，将 self.visible 设置为false，为此， self.visible 必须是可观察的。

这是一个有效的示例：

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings.stopBinding = true;

function showStatusMessage(message) {
    var node = $("#statusTemplate");
    ko.cleanNode(node[0]);
    ko.applyBindings(new StatusMessageTemplate(message), node[0]);
}

function StatusMessageTemplate(message) {
    var self = this;

    self.visible = ko.observable(message.isVisible);
    self.statusText = message.statusText;

    self.hide = function() {
        self.visible(false);
    }
}

$("button").on('click', function(){
  showStatusMessage({
    isVisible: true,
    statusText: "Loading your data, please wait..."
  });
});


var myPageVM = {
  property1: "example"
};

ko.applyBindings(myPageVM);

#statusTemplate {
  border: 1px solid red;
  padding: 10px 5px;
  margin: 25px;
}
.hide {
  border: 1px solid #000;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is my page
</div>

<button type="button">
  Show a message
</button>




<!-- ko stopBinding: true -->
<div id="statusTemplate" data-bind="visible: visible">
    <span data-bind="text: statusText">Nothing here by default...</span>
    <span data-bind="click: hide" class="hide">Hide</span>
</div>
<!-- /ko -->

尝试绑定到Knockout中的模板时属性未定义

1 个答案: