当 Knockout observable 未定义或 JS 禁用时显示默认值

Question

使用 Knockout.js，如果绑定到元素的 observable 未定义，是否有办法显示元素的原始内容？

<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 提供服务器端的默认值。

Answer 1

您可以简单地使用|| 运算符来显示默认消息，以防message 未定义。加上将默认文本作为内容：

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

如果禁用了 javascript，则绑定将被忽略，您将改为显示内容。

JSFiddle

Answer 2

试试这个

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

Answer 3

您可以通过多种方式设置这样的默认值，最简单的方法是设置默认的 observable 值，因为您的 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 -->