javascript - 使用 Knockout 通过 Ajax 发布 ViewModel

Question

这里的名称、缩写、描述、权重、序列来自文本框。我将这些值放入 LanguagesVM 中，通过 ajax 发布时它不会发布这些值。我必须找到一个 View 模型中所有文本框的值，我已经在下面完成了这一操作，但它没有将该 View 模型发布到 Controller 。

  $(function () {
        function Languages(data) {
            var self = this;
            self.name = ko.observable(data.name);
            self.abbrev = ko.observable(data.abbrev);
            self.description = ko.observable(data.description);
            self.sequence = ko.observable(data.sequence);
            self.weight = ko.observable(data.weight);
            self.isActive = ko.observable(data.isActive);
        }
        function LanguagesVM() {
            var self = this;
            self.Languages = new Languages();           
            ko.applyBindings(LanguagesVM, document.getElementById("CreateLanguage"));

            self.saveLanguage = function () {
                alert("Save---");
                $.ajax({
                    type: "Put",
                    url: rootUrl + 'api/my/Language',
                    data: ko.toJSON(self.Languages),
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        console.log(result.d);
                    },
                    error: function (err) {
                        console.log(err.status + " - " + err.statusText);
                    }
                });
            };
        };

    });

这是我的 html 代码:--

@using (Html.BeginForm(htmlAttributes: new { @class = "form single-col",@id="CreateLanguage" }))
{
    <div>
        <div class="form-group">
            <label for="Name">Name</label>
            <input class="text-box single-line" data-bind="value:name" data-val="true" id="Name" name="Name" placeholder="Name" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Abbrev">Abbrev</label>
            <input class="text-box single-line" data-bind="value:abbrev" data-val="true" id="Abbrev" name="Abbrev" placeholder="Abbrev" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Description">Description</label>
            <input class="text-box single-line" data-bind="value:description" data-val="true" id="Description" name="Description" placeholder="Description" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Sequence">Sequence</label>
            <input class="text-box single-line" data-bind="value:sequence" data-val="true" id="Sequence" name="Sequence" placeholder="1" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Weight">Weight</label>
            <input class="text-box single-line" data-bind="value:weight" data-val="true" id="Weight" name="Weight" placeholder="0" type="text" value="">
        </div>
        <div class="form-group">
            <label class="checkbox">
                <input type="checkbox" value="true" name="IsActive" id="IsActive" data-bind="checked:isActive"> Active
            </label>
            <span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
            <div class="controls">
                <div class="btn-group">

                    <button type="submit" class="btn btn-primary" data-bind="click:saveLanguage"><i class="fa fa-plus"></i> Create</button>
                    <a class="btn btn-info" href="@Url.Action("Index")"><i class="fa fa-arrow-left"></i> Back to List</a>
                </div>
            </div>
        </div>
    </div>
}

Answer 1

您的 LanguagesVM 函数已定义，但看起来从未执行过。

在函数定义后添加以下代码:

vm = new LanguagesVM();

应该足以触发此处的绑定(bind)。使用 new 可能不是必需的，但在 LanguagesVM 中使用 this 关键字表明应该使用它来防止不正确的范围界定。