knockout.js - 数据绑定文本的默认值

Question

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

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

如果文本值为null,我想要的是在此处指定默认值,例如"No Job Title Specified".

这可以在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小提琴:http://jsfiddle.net/735qC/43/

Answer 2

所以我猜你想要一个真正的默认值而不仅仅是一个占位符文本.这是一种使用扩展器来实现这一目标的方法;

ko.extenders.defaultIfNull = function(target, defaultValue) {
    var result = ko.computed({
        read: target,
        write: function(newValue) {
            if (!newValue) {
                target(defaultValue);
            } else {
                target(newValue);
            }
        }
    });

    result(target());

    return result;
};

var viewModel = function() {
   this.someValue = ko.observable().extend({ defaultIfNull: "some default" });
};

ko.applyBindings(new viewModel());

http://jsfiddle.net/madcapnmckay/aTMpp/

希望这可以帮助.