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

时间:2013-04-16 15:25:22

标签: javascript jquery mvvm knockout.js

我有两个下拉列表,更改后会更新标签。标签绑定到我的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>

JS

$('.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 个答案:

答案 0 :(得分:1)

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

因为您的视图模型qualifier已经有了一个observable,您只需要使用select上的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.