使用单击绑定更新模型时，淘汰赛不更新视图

Question

我在 MVC5 应用程序中使用了 knockout 3.0，以及 knockout.mapping (v2.4.1) 库。

当一个按钮被点击时，我想要一个剔除 viewModel 属性被更新，并且关联控件的值也被更新。

以下是我的大型项目的一个精简概念证明，它似乎无法正常工作。

观点：

        <div class="col-md-6">
        Has College:
        <button data-bind="click: hasCollege">Yes</button>
        <button data-bind="click: function () { LevelOfEducation = 'High School'; console.log('Updated LOE: ' + $data.LevelOfEducation) }">No</button>

        <select data-bind="value: LevelOfEducation" id="LevelOfEducation" name="LevelOfEducation">
            <option value="">Please Select</option>
            <option value="GED">GED</option>
            <option value="High School">High School</option>
            <option value="0-23 College Credits">0-23 College Credits</option>
            <option value="24-47 College Credits">24-47 College Credits</option>
            <option value="Associate's Degree">Associate's Degree</option>
            <option value="Bachelor's Degree">Bachelor's Degree</option>
            <option value="Master's Degree">Master's Degree</option>
            <option value="Doctoral Degree">Doctoral Degree</option>
        </select>
        <br />
        <br />
        <input type="text" data-bind="value: YearObtainedHSGED" />
        <select data-bind="value: YearObtainedHSGED" id="YearObtainedHSGED" name="YearObtainedHSGED">
            <option value="">Please Select</option>
            <option value="2014">2014</option>
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
        </select>
    </div>

这里是 Javascript：

    // Condensed ViewModel from MVC Controller.
    var model = {
        'LevelOfEducation': 'High School',
        'YearObtainedHSGED': '2011'
    }
    var viewModel = ko.mapping.fromJS(model);

    viewModel.hasCollege = function (data, event) {
        console.log("Current LOE: " + ko.unwrap(data.LevelOfEducation));
        viewModel.LevelOfEducation = '0-23 College Credits';

        // Also tried:
        // data.LevelOfEducation = '0-23 College Credits';

        console.log("Updated LOE: " + viewModel.LevelOfEducation);
        console.log($("#LevelOfEducation").val()) // This value never changes when the buttons are clicked.
    }

    ko.applyBindings(viewModel);

前两个按钮和第一个下拉菜单绑定到 viewModel 属性“LevelOfEducation”。当 viewModel 属性更改时，敲除应该更新下拉列表。下拉列表中预先填充了来自剃刀视图模型的值。单击“是”时，该值应更改为所选选项“0-23 大学学分”。当点击“否”时，它应该将值改回“高中”。根据控制台日志，模型值在变化，但控件没有更新。

为了比较，我有一个 YearObtainedHSGED 绑定的文本框和下拉菜单。当一个值发生变化时，它会相应地更新另一个控件。

如何在单击是/否按钮时更新 LevelOfEducation 下拉菜单？

JSFiddle for example

Answer 1

我想通了。

当您更改淘汰视图模型的属性时，您应该使用：

viewModel.Property('new value');

而不是我使用的：

viewModel.Property = 'new value'; // no worky