当挖空可观察未定义或禁用 JS 时显示默认值

Show default value when Knockout observable undefined or JS disabled

本文关键字：JS 显示 默认值 观察 未定义      更新时间：2023-09-26

使用Knockout.js，如果有办法让元素的原始内容显示，如果绑定到它的可观察量是未定义的？

<p data-bind="text: message">Show this text if message is undefined.</p>
<script>
    function ViewModel() {
        var self = this;        
        self.message = ko.observable();    
    };
    ko.applyBindings(new ViewModel());
</script>

我知道有一些解决方法使用 visible 、hidden 或 if，但我发现这些太混乱了;我不希望同一个元素写出两次，每个条件一次。

另外，我不想使用任何类型的默认可观察值。走这条路，如果禁用JS，则不会显示任何内容。爬虫也是如此：他们只会看到一个空的<p>标签。

总而言之，我想说"如果存在，请显示此消息，否则不要理会元素及其文本。

这背后的原因是我想首先使用 Razor 填充我的元素。

<p data-bind="text: message">@Model.Message</p>

然后，在浏览器中，如果启用了 JS，我可以随心所欲地使用它。但是，如果没有JS或用户是爬虫，则至少会看到通过Razor提供的服务器端提供的默认值。

您可以简单地使用 || 运算符在未定义的情况下显示默认消息message。另外，将默认文本作为内容：

<p data-bind="text: message() || '@Model.Message' ">@Model.Message</p>

如果禁用 javascript，则绑定将被忽略，而将显示内容。

JSFiddle

试试这个

<p data-bind="text: message"></p>
<script>
    function ViewModel() {
        var self = this;        
        self.text = ko.observable();    
        self.message = ko.computed(function(){
            if(self.text() != undefined){
                return self.text();
            }else{
                return "Show this text if message is undefined.";
            }
        });
    };
    ko.applyBindings(new ViewModel());
</script>

您可以通过多种方式设置默认值，最简单的方法是设置默认的可观察值，因为您的 JS 文件将合并到您的 HTML 中并且能够访问@Model.Message，因此您可以设置默认值：

self.message = ko.observable(@Model.Message);

以下是一些其他变体：

var viewModel = {
   message: ko.observable(),
   message1: ko.observable('Show this text if message is undefined.')   
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Option 1</h2>
<i>Set default value of observable: self.message1 = ko.observable(@Model.Message);</i>
<p data-bind="text: message1"></p>
<h2>Option 2</h2>
<i>Check for undefined and replace</i>
<p data-bind="text: message() ? message : message1"></p>
<h2>Option 3</h2>
<i>Use KO if syntax to display content if defined/undefined</i>
<!-- ko if: message() -->
<p data-bind="text: message"></p>
<!-- /ko -->
<!-- ko ifnot: message() -->
<p data-bind="text: message1"></p>
<!-- /ko -->

相关文章：