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>标记。

总结一下，我想说＆＃34;如果它存在则显示此消息，否则单独保留元素及其文本。＆＃34;

这背后的原因是我想首先使用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

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

在Knockout observable undefined或JS disabled时显示默认值

3 个答案: