0

在我看来，我想使用 Knockout 显示状态消息。用户必须等待很长时间，我想向用户展示这些消息正在发生什么（并且仍然有一些事情发生）。

为此，我创建了一个函数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>

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

4

1 回答 1

0

在你的self.hide函数中，你将self.visible设置为 false，为了做到这一点，self.visible需要是一个 observable。

这是一个工作示例：

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

于 2018-08-31T15:13:44.927 回答