24

knockout.jsには、次のような非常に標準的なフィールドがあります。

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

テキスト値がnullの場合、たとえば「役職が指定されていません」のように、ここでデフォルト値を指定する必要があります。

これはknockout.jsで実行できますか？

ありがとう。

4

7 に答える 7

49

最短/最も簡単な方法はおそらく次のとおりです。

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

またはJSFiddle：http: //jsfiddle.net/735qC/43/

于 2012-12-07T16:04:08.010 に答える
18

したがって、プレースホルダーテキストだけでなく、実際のデフォルト値が必要だと思います。エクステンダーを使用してこれを行う方法は次のとおりです。

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/

お役に立てれば。

于 2012-05-14T04:17:40.403 に答える
3

他のコードサンプルよりもさらに短いのは次のとおりです。

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

印心とともに

ko.observable().extend({ withDefault: "some Default" })
于 2016-12-30T09:46:19.257 に答える
1

あなたはこのようにそれを行うことができます：

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

未定義のコントロールを使用すると、ページを初めてロードするときに、その機能があるかどうかを確認できます。

于 2013-08-01T18:07:23.880 に答える
1

常にデフォルト値を返すエクステンダーを適用する代わりに、表示目的でのみデフォルト値を設定すると便利な場合があります。

これにより、モデルのプロパティは空のままになります。これは、たとえば、検証（空のプロパティのチェック）やサーバーへのデータの返送（このデフォルト値を返送したくない場合）の場合に適しています。

次の例でカスタムバインディングを使用できます。これは、テキストバインディングに基づいており、提供されたデフォルトのテキストをレンダリングします。提供され-ていない場合は、必要に応じて調整できます。

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>

于 2017-03-17T15:11:52.960 に答える
0

テーブルのデータを返すときにこれに遭遇しましたが、並べ替え可能な列がいくつかあります。

<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() || ''}はエラーが発生しました。

于 2013-05-14T14:18:20.287 に答える
0

入力フィールドにデータを表示するには、最も簡単な方法は...

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

エラーが発生しますが、機能します。..:)

于 2016-07-18T02:24:18.823 に答える