3

我有一个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 }">
4

2 回答 2

3

您在css绑定方面走错了路，因为如果您不使用可观察对象，如果您的选择值发生变化，它将不会更新您的类。

但是，您可以（错过）使用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 用于此功能。

于 2013-04-16T09:09:36.147 回答
1

您可以尝试使用$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

于 2013-04-16T08:42:07.050 回答