Question

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

单击按钮时，我想要更新knockout 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属性更改时，knockout应该更新下拉列表。下拉预先填充了剃刀视图模型中的值。单击“是”时，该值应更改为所选选项“0-23 College Credits”。当点击“否”时，它应该将值更改回“高中”。根据控制台日志，模型值正在更改，但控件未更新。

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

如果单击是/否按钮，如何使LevelOfEducation下拉更新？

JSFiddle for example

Answer 1

我明白了。

更改knockout viewModel上的属性时，您应该使用：

viewModel.Property('new value');

而不是我正在使用的东西：

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

在使用单击绑定时更新模型时，Knockout不会更新视图

1 个答案: