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>

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望这有帮助。

Answer 3

比其他代码示例更短的内容如下：

ko.extenders.withDefault = function(target, defaultValue) {
    target.subscribe(function(input) {
        if(!input) target(defaultValue)
    });
    return target
};

启动

ko.observable().extend({ withDefault: "some Default" })

Answer 4

你可以这样做：

<label data-bind="text: JobTitle() != undefined && JobTitle() != null ? JobTitle() : 'No Job Title Specified'"></label>

使用未定义的控件，您可以在第一次加载页面时检查是否具有该功能。

Answer 5

默认值仅用于显示，而非应用始终返回默认值的扩展程序，这可能很有用。

这样，模型的属性保持为空，例如，当涉及验证（检查空属性）或将数据发送回服务器时（您可能不希望发回这个默认值）。 / p>

您可以在以下示例中使用自定义绑定，该示例基于文本绑定，如果未提供，则呈现提供的默认文本或-（您可以根据需要调整此选项）：< / p>

ko.bindingHandlers['textWithDefault'] = {
    'init': function() {
      return { 'controlsDescendantBindings': true };
    },
    'update': function (element, valueAccessor) {
        var value, defaultValue;
        var options = ko.utils.unwrapObservable(valueAccessor());
        if (options !== null && typeof options == "object") {
            value = ko.unwrap(options['text']);
            defaultValue = ko.unwrap(options['default']);
        } else {
            value = options;
        }
        defaultValue = defaultValue || '-';

        ko.utils.setTextContent(element, value || defaultValue);
    }
};

function ExampleModel() {
  this.value = 'Sample text';
  this.observableValue = ko.observable('More sample text');
  this.emptyValue = '';
  this.emptyObservableValue = ko.observable();
};

ko.applyBindings(new ExampleModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div data-bind="textWithDefault: value"></div>
<div data-bind="textWithDefault: observableValue"></div>
<div data-bind="textWithDefault: emptyValue"></div>
<div data-bind="textWithDefault: emptyObservableValue"></div>
<div data-bind="textWithDefault: { text: emptyValue, default: 'Custom empty value' }"></div>
<div data-bind="textWithDefault: { text: emptyObservableValue, default: 'Another custom empty value' }"></div>

Answer 6

我在返回表的数据时遇到了这个问题，但只有一些列可以排序。

<tr data-bind="foreach: ArrAsrColumnHeaders">
  <th class="sortable koJson" data-bind="
     css: {active: ((typeof(isActive) != 'undefined') ?  isActive : '')}
      , text: text
      , attr:{href: ((typeof(jsonClick) != 'undefined') ?  jsonClick : '')}">
  </th>
</tr>

这表示，对于表头中的每一列，如果定义了'isActive'并将其设置为true，则添加类'active'，但如果不存在则不要惊慌失措。添加'href'属性也是如此。

免责声明：我不太清楚了解这种方法的局限性，但在我的情况下，这对我有用，而css: {active: isActive() || ''}更简单的方法会引发错误。

Answer 7

要在输入字段中显示数据，最简单的方法是......

它错误但它有效..：）

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

7 个答案: