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

Posted 2023-03-27

【中文标题】knockout.js - 数据绑定文本默认值

【英文标题】：knockout.js - data-bind text default value

【发布时间】：2012-05-21 13:38:26

【问题描述】：

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

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

如果文本值为空，我希望在此处指定一个默认值，例如“未指定职位”。

这可以在 knockout.js 中实现吗？

谢谢。

【参考方案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/

【参考方案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/

希望这会有所帮助。

【讨论】：

所以也许只有我一个人，但这仅显示“默认”值...尝试将值更改为某个值并观察它不会在您的小提琴中更新。

这是fiddle。为什么这不说foo（或hola，甚至）

@Jason - 你完全正确，我错过了关于 if 的下半部分更新！我已经更正了代码，这是您修复的小提琴jsfiddle.net/mUVvZ/1。好地方！

【参考方案3】：

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

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

随着启蒙

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

【参考方案4】：

你可以这样做：

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

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

【参考方案5】：

使用默认值仅用于显示目的可能很有用，而不是应用总是返回默认值的扩展程序。

这样，模型的属性保持为空，例如在验证（检查空属性）或将数据发送回服务器（您可能不想发回此默认值）时更好。

您可以在以下示例中使用自定义绑定，它基于文本绑定，呈现提供的默认文本或-（如果未提供）（当然，您可以根据需要进行调整）：

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>

【参考方案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() || '' 更直接的方法会引发错误。

【参考方案7】：

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

<input title="Stage" value="Default Entry Goes Here" readonly="readonly" type="text" id="stage" class="form-control" data-bind="value: model.stage ||text-input: Default Entry Goes Here">

它出错但它有效.. :)