Как связать атрибут элемента DOM knockoutjs?

Question

[Дмитрий]

Есть такой селект

<select data-bind="value: productPrice">
<option data-price="2">Цена $2.00</option>
<option data-price="4">Цена $4.00</option>
</select>

Рядом есть блок, в который я хочу выводить связанную информацию типа так:

Ваша цена <span data-bind="text: productPrice"></span>

При таком связывании естественно выводится текст выбранного option. Я же хочу вывести атрибут data-price выбранного option.

Как это можно сделать в knockoutjs?

Answer 1

[Алексей Зуев]

К примеру. можно написать custom binding под это дело

<select data-bind="selectedAttribute: { attr: 'data-price', property: productPrice }">

var viewModel = {
	productPrice: ko.observable()
};

ko.bindingHandlers.selectedAttribute = {  
    init: function(element, valueAccessor) {
        var attr = valueAccessor().attr,
            property = valueAccessor().property;

        function updateModel() {
            property(element.options[element.selectedIndex].getAttribute(attr));
        }
        
        element.addEventListener('change', updateModel);
        updateModel();
    }
};

ko.applyBindings(viewModel);

Живой пример

Comments

[Дмитрий]

Большое спасибо и плюс в карму ;) Полез разбирать создание кастомных биндингов. Пока не всё понятно.