javascript - Jquery Knockout - 在数据绑定(bind)属性中获取元素实例

Question

我有一个 select 元素，我在其中使用 Jquery Knockout 绑定(bind) 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 绑定(bind)上走错了路，因为如果你不使用 observables，它不会在你的 select 值发生变化时更新你的类。

但是您可以(错过)使用 event 绑定(bind)并订阅 change 事件:

<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 作斗争，并为 View 模型上的每个选择设置属性:

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 来实现这个功能。