Jquery Knockout - 在数据绑定属性中获取元素实例答案

【问题标题】：Jquery Knockout - get element instance inside data-bind attributeJquery Knockout - 在数据绑定属性中获取元素实例
【发布时间】：2013-04-16 17:09:36
【问题描述】：

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

【问题讨论】：

不是 100% 确定你在这里问的是什么，你能更好地解释一下你的场景吗？ “访问当前元素实例”可以通过 DOM 轻松完成吗？
我在我的问题中添加了一个工作示例..希望它更清楚
这个其实挺难的，我会继续努力破解的。
是的..我知道:) 我做了一些研究，但没有找到任何东西。我使用纯 jquery 来实现这一点

标签： javascript jquery knockout.js

【解决方案1】：

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

【讨论】：

没错..我没有使用不会在值更改时触发 css 值的 observables。第二个解决方案完美
如果您想为所有选择提供通用解决方案，您可以使用自定义绑定。

【解决方案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

【讨论】：

不，$element 没有定义