Вопрос по knockout.js, drop-down-menu, data-binding – выбить привязать текстовую метку к раскрывающемуся значению выбранного параметра текста

11

Есть ли простой способ привязать текстовое поле элемента div к изменению на основе текстового значения выбранного параметра в раскрывающемся списке на той же странице?

<div data-bind="text: dropdownValue"></div>
<select>
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

Обратите внимание, что я не хочу помещать значения в элемент select с использованием javascript. Я хотел бы привязать значение прямо из HTML. Я также могу включить jQuery, чтобы он работал.

Ваш Ответ

2   ответа
3

Вот как я реализовал похожую функцию. У меня была определенная наблюдаемая в моей модели под названием «dropDownValue». У меня также был наблюдаемый массив под названием «dropDownValues». Мой HTML выглядел примерно так:

<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>

Обратите внимание, что я использовал одно и то же поле для optionValues и optionsText (не уверен, что в этом случае действительно нужен optionsText). В моем конкретном приложении "dropDownValue" был предварительно заполнен в другом месте, поэтому, когда я открыл диалоговое окно с указанным выше выбором, я хотел, чтобы оно по умолчанию использовалось для ранее заполненного значения, а также связать его так, чтобы, если пользователь изменил его, я мог отразить это изменение обратно в база данных.

24

Я искал похожую функциональность в том, что я собирал вчера, и не смог ее найти, поэтому в итоге я просто изменил то, что хранил в атрибутах значения. Иногда это самое простое решение.

Вот быстрое и некрасивое решение проблемы с использованием jQuery:

HTML

<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

function ViewModel() {
    var self = this;
    this.dropdownValue = ko.observable();
    this.dropdownText = ko.computed(function() {
        return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
    });
};

ko.applyBindings(new ViewModel());

Живой пример:http://jsfiddle.net/5PkBF/

Если вы пытались сделать это в нескольких местах, вероятно, лучше написать пользовательскую привязку, например:

HTML

<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

ko.bindingHandlers.selectedText = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value($("option:selected", element).text());

        $(element).change(function() {
            value($("option:selected", this).text());
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
    }
};

function ViewModel() {
    this.dropdownValue = ko.observable();
};

ko.applyBindings(new ViewModel());

Живой пример:http://jsfiddle.net/5PkBF/1/

Я считаю, что у вас есть ошибка в фильтре, должно бытьfunction(index, el)
именно то, что мне было нужно! Спасибо!
Проблема, с которой я столкнулся, заключалась в том, что я использовал шаблон protectedObservable, что вызывало проблемы.knockmeout.net/2011/03/… - Все еще не в состоянии заставить его работать, используя это жестко. Adam Levitt
+1 за пользовательскую привязку
Спасибо, @fearofawhackplanet, ты абсолютно прав. Вот обновленный пример, который фактически обновляет оба способа:jsfiddle.net/5PkBF/205.

Похожие вопросы