使用Knockout通过Ajax发布ViewModel

Question

这里的名称，名称，说明，重量，顺序来自文本框。我将这些值放在LanguagesVM中，而通过ajax发布时，则不发布此值。 我必须在下面完成的一个viewmodel中找到所有文本框的值，但不会将viewmodel发布到控制器。

  $(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();

应该足以触发此处的绑定。 可能没有必要使用new，但是在LanguagesVM中使用this关键字建议应使用它来防止错误的作用域。