KnockOut.js文本绑定客户端更改不更新viewmodel

I have two dropdowns upon change will update a label. the label is bound to an observably field in my viewModel using text binding. However, when the label text is changed, the viewModel submitted to the server is not updated. I couldn't find related information from knockout website. Am I missing something?

我有两个下拉菜单，更改后会更新标签。标签绑定到我的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());
});

1 个解决方案

#1

For this scenario you don't need to use jquery at all.

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

Because you already have an observable on your viewmodel qualifier you just need to use the value binding on your selects and Knockout will do the change handling for you:

因为你的viewmodel限定符已经有了一个observable，你只需要在你的选择上使用值绑定，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>

Demo JSFiddle.

演示JSFiddle。

#1