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，如果你的选择值发生变化，它就不会更新你的类。

但是你可以（错过）使用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

Jquery Knockout - 在data-bind属性中获取元素实例

2 个答案: