使用 Knockout 通过 Ajax 发布 ViewModel答案

【问题标题】：Post ViewModel through Ajax using Knockout使用 Knockout 通过 Ajax 发布 ViewModel
【发布时间】：2014-07-24 21:25:59
【问题描述】：

这里的名称、缩写、描述、重量、序列来自文本框。我将这些值放在 LanguagesVM 中，通过 ajax 发布时它没有发布。我必须在下面完成的一个视图模型中找到所有文本框的值，但它不会将该视图模型发布到控制器。

  $(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>
}

【问题讨论】：

你确定它没有发布吗？你能在浏览器的开发者工具中查看网络标签吗？
您能在小提琴中发布更多代码吗？
@Wayne 是的，它甚至没有绑定视图模型中的数据..

标签： javascript jquery ajax knockout.js

【解决方案1】：

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

在函数定义后添加如下代码：

vm = new LanguagesVM();

应该足以在此处触发绑定。可能不需要使用 new，但 LanguagesVM 中使用 this 关键字表明应该使用它来防止不正确的作用域。

【讨论】：