data-binding - knockout.js - 数据绑定(bind)文本默认值

Question

在 knockout.js 中，我有一个非常标准的字段，如下所示:

<label data-bind="text: JobTitle"></label>

如果文本值为空，我想要在此处指定默认值，例如“未指定职位”。

这可以在 knockout.js 中执行吗？

谢谢。

Answer 1

最短/最简单的方法可能是:

<label data-bind="text: JobTitle()||'No Job Title Specified'"></label>

工作示例:

var ViewModel = function() {
    this.jobTitle = ko.observable();
};
 
ko.applyBindings(new ViewModel());

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='liveExample'>   
    <p>Job Title: <input data-bind='value: jobTitle' /></p> 
    <h2 data-bind="text: jobTitle()||'No Job Title Specified'"></h2>  
</div>

或 JS fiddle : http://jsfiddle.net/735qC/43/