Jquery Knockout - 在data-bind屬性中獲取元素實例

Question

我有一個select元素，我使用Jquery Knockout綁定css類。

我想直接從data-bind屬性訪問當前元素實例，而不在ViewModel創建屬性（因為我有許多共享相同功能的select元素）

這可能嗎？

<select id="select1" data-bind="css: { 'no-value-selected': $item.val() == '' }">
    <option value="">[Select a value]</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

編輯使用ViewModel實現這一點（我想避免的）

function ViewModel() {
    this.select1HasNoValueSelected = ko.computed(function () {
        return $("#select1").val() == '';
    }, this);
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

<select id="select1" data-bind="css: { 'no-value-selected': select1HasNoValueSelected }">

Answer 1

你使用css綁定的方法是錯誤的，因為如果你沒有使用observable，如果select的值發生了變化，它就不會更新你的類。

但是，您可以（錯過）使用event綁定並訂閱更改事件：

<select id="select1" class="no-value-selected" data-bind="event: { 'change': 
function() { $($element).val() == '' ? 
             $($element).addClass('no-value-selected') : 
             $($element).removeClass('no-value-selected') } }">
    <option value="">[Select a value]</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

演示JSFiddle。 （第二次下拉）

但最好的解決方案是不與KnockOut作斗爭，並為視圖模型上的每個選擇提供屬性：

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

<select id="select1" data-bind="css: { 'no-value-selected': !select1Value() }, 
                                value: select1Value">
    <option value="">[Select a value]</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

演示JSFiddle。 （第三次下拉）

或者根本不使用Kncokout這個功能。

Answer 2

您可以嘗試使用$element而不是$item ：

<select data-bind="css: { 'no-value-selected': $element.val() == '' }">
    <option value="">[Select a value]</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

文檔： http ： //knockoutjs.com/documentation/binding-context.html