使用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關鍵字建議應使用它來防止錯誤的作用域。