Knockout.js - значение по умолчанию для привязки данных

Ответ 1

Итак, я предполагаю, что вы хотите получить реальное значение по умолчанию, а не только текст заполнителя. Вот способ сделать это с помощью расширителя;

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/

Надеюсь, что это поможет.

Ответ 2

Самый короткий/самый простой способ:

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

Ответ 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>

С помощью элемента управления undefined вы можете проверить, есть ли у вас эта функция или нет, когда вы загружаете страницу в первый раз.

Ответ 5

Я столкнулся с этим, когда возвращал данные для таблицы, но имел только сортировку столбцов.

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

Это говорит о том, что для каждого столбца в заголовке таблицы добавьте класс 'active', если 'isActive' определен и установлен в true, но не волнуйтесь, если его нет. То же самое касается добавления атрибута "href".

Отказ от ответственности: я недостаточно разбираюсь в нокауте, чтобы узнать ограничения этого подхода, но это сработало для меня в моем случае, тогда как более простой подход css: {active: isActive() || ''} забросил ошибки.

Ответ 6

Чтобы отобразить данные в поле ввода, самый простой способ -...

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

Это ошибки, но это работает..:)

Ответ 7

Возможно, было бы полезно иметь значение по умолчанию только для отображения, вместо применения расширителей, которые всегда возвращают значение по умолчанию.

При этом свойства вашей модели остаются пустыми, что лучше, например, когда дело доходит до проверки (проверка пустых свойств) или отправки данных на сервер (вы можете не захотеть отправить это значение по умолчанию).

Вы можете использовать пользовательскую привязку в следующем примере, который основан на привязке текста, который отображает предоставленный текст по умолчанию или -, если он не указан (вы можете настроить это для своих нужд, конечно):

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>