KnockOut.js 文本绑定客户端更改不更新视图模型答案

【问题标题】：KnockOut.js text binding client side change not updating viewmodelKnockOut.js 文本绑定客户端更改不更新视图模型
【发布时间】：2013-04-16 15:25:22
【问题描述】：

我有两个更改后的下拉菜单会更新一个标签。标签使用文本绑定绑定到我的 viewModel 中的一个可观察字段。但是，当标签文本发生变化时，提交给服务器的 viewModel 并没有更新。我无法从淘汰赛网站上找到相关信息。我错过了什么吗？

HTML

       <select class="string-match-dropdown">
            <option value="*">contains</option>
            <option value="^">starts with</option>
            <option value="$">ends with</option>
            <option value="=">is exactly</option>
            <option value="@@">has value</option>
        </select>
        <select class="date-money-match-dropdown">
            <option value="eq">=</option>
            <option value="noteq"><></option>
            <option value="gt">></option>
            <option value="gteq">>=</option>
            <option value="lt"><</option>
            <option value="lteq">&lt;=</option>
        </select>
        <label class="match-label" data-bind='html: qualifier'></label>

$('.date-money-match-dropdown').live('change', function () {
    $(this).parent().find('.match-label').html($(this).find('option:selected').text());
});

$('.string-match-dropdown').live('change', function () {
    $(this).parent().find('.match-label').html($(this).find('option:selected').text());
});

【问题讨论】：

是的，您缺少问题中的代码！作为初学者，如何使用 jquery 更新标签？顺便说一句，我不认为text 绑定是两种方式......所以请发布您的代码的相关部分（JSFiddle 中的复制会更好）否则我们只是在这里猜测。
贴出了html数据绑定和jquery代码来更新标签
为什么需要 jquery 来处理下拉菜单的变化？为什么不使用纯敲除解决方案jsfiddle.net/qXvLp？
拉古纳，请看knockout tutorials
@nemesv，谢谢！我正在使用你在提琴手中的东西。它对我有用。如果需要，您可以将评论更改为答案。

标签： javascript jquery mvvm knockout.js

【解决方案1】：

对于这种情况，您根本不需要使用 jquery。

因为您的视图模型 qualifier 上已经有一个 observable，您只需要在您的 selects 上使用 value binding，Knockout 就会为您进行更改处理：

<select class="string-match-dropdown" data-bind='value: qualifier'>
    <option value="*">contains</option>
    <option value="^">starts with</option>
    <option value="$">ends with</option>
    <option value="=">is exactly</option>
    <option value="@@">has value</option>
</select>
<select class="date-money-match-dropdown" data-bind='value: qualifier'>
    <option value="eq">=</option>
    <option value="noteq"><></option>
    <option value="gt">></option>
    <option value="gteq">>=</option>
    <option value="lt"><</option>
    <option value="lteq">&lt;=</option>
</select>
<label class="match-label" data-bind='html: qualifier'></label>

演示JSFiddle.

【讨论】：