Question

我用mvc和knockout.js尝试了一些东西，但可能是一个有绑定问题。

我的观点模型是：

var urlPath = window.location.pathname;
var currencyVm = function () {

var self = this;

var validationOptions = { insertMessages: true, decorateElement: true, errorElementClass: 'errorFill' };
ko.validation.init(validationOptions);

//ViewModel
self.ID = ko.observable(0);
self.Id_Region = ko.observable("");
self.Description = ko.observable("");
self.Symbol = ko.observable("");
self.PayPalCode = ko.observable("");
self.IFSCode = ko.observable("");


self.isGridVisible = ko.observable(true);
self.isEditVisible = ko.observable(false);
self.isAddVisible = ko.observable(false);


//Objects ---------------------------------------------
self.Currency = ko.observable();
self.Currencys = ko.observableArray([]);

//Methods ---------------------------------------------

//Edit
self.editCurrency = function (dataItem) {

    self.isGridVisible(false);
    self.isEditVisible(true);

    self.ID = ko.observable(dataItem.ID);
    self.Id_Region = ko.observable(dataItem.Id_Region);
    self.Description = ko.observable(dataItem.Description);
    self.Symbol = ko.observable(dataItem.Symbol);
    self.PayPalCode = ko.observable(dataItem.PayPalCode);
    self.IFSCode = ko.observable(dataItem.IFSCode);

    //var vm = ko.mapping.fromJS(dataItem);
    //self.Currency(vm);
};

//Add
self.addCurrency = function () {
    self.isGridVisible(false);
    self.isAddVisible(true);
    self.isEditVisible(false);
    self.reset();
}

// Cancel Edit
self.cancelEdit = function () {
    self.isEditVisible(false);
    self.isGridVisible(true);
}

// Cancel Add
self.cancelAdd = function () {
    self.isAddVisible(false);
    self.isGridVisible(true);
}

//Reset 
self.reset = function () {
    self.ID(0);
    self.Id_Region("");
    self.Description("");
    self.Symbol("");
    self.PayPalCode("");
    self.IFSCode("");
}

//Actions --------------------------------------------------

var Currency = {
    ID: self.ID,
    Id_Region: self.Id_Region,
    Description: self.Description,
    Symbol: self.Symbol,
    PayPalCode: self.PayPalCode,
    IFSCode: self.IFSCode
};

//Create
self.createCurrency = function () {
    $.ajax({
        url: "/Currency/CreateCurrency",
        cache: false,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: ko.toJSON(Currency),
        success: function (data) {
            self.isEditVisible(false);
            self.isAddVisible(false);
            self.isGridVisible(true);
            $("#gridCurrencies").data("kendoGrid").dataSource.read();
        }
    }).fail(
         function (xhr, textStatus, err) {
             alert(err);
         });
}


// Update
self.updateCurrency = function () {
    $.ajax({
        url: "/Currency/UpdateCurrency",
        cache: false,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: ko.toJSON(Currency),
        success: function (data) {
            self.isEditVisible(false);
            self.isEditVisible(false);
            self.isGridVisible(true);
            $("#gridCurrencies").data("kendoGrid").dataSource.read();
        }
    })
}


//Delete
self.deleteCurrency = function (currency) {
    $.confirm({
        title: "Delete",
        content: "Sure to delete ?",
        confirm: function () {
            $.ajax({
                url: "/Currency/DeleteCurrency",
                cache: false,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON(currency),
                success: function (data) {
                    $("#gridCurrencies").data("kendoGrid").dataSource.read();
                }
            }).fail(
        function (xhr, textStatus, err) {
            alert(err);
        });
        },
        cancel: function () {

        }
    });
}
};

在视图中我调用applybinding然后根据Telerik网格的选定行调用editCurrency或deleteCurrency。

<script>

var viewModel = null;

$(function () {
    viewModel = new currencyVm();
    ko.applyBindings(viewModel);
});

function deleteCurrency(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    viewModel.deleteCurrency(dataItem);
}

function editCurrency(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    viewModel.editCurrency(dataItem);
}

</script>

在标记中我有带绑定的html元素：

Thi是添加的div：

<div class="panel panel-default" data-bind="visible: isAddVisible" style="display:none">
    <div class="panel-heading">Add New Currency</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                @Html.LabelFor(model => model.IFSCode)
                <input type="text" data-bind="value: $root.IFSCode, valueUpdate: 'keypress'" class="form-control " />
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.PayPalCode)
                <input type="text" data-bind="value: $root.PayPalCode, valueUpdate: 'keypress'" class="form-control " />
            </div>
            <div class="col-md-3">
                @Html.LabelFor(model => model.Symbol)
                <input type="text" data-bind="value: $root.Symbol, valueUpdate: 'keypress'" class="form-control " />
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                @Html.LabelFor(model => model.Description)
                <input type="text" data-bind="value: $root.Description" class="form-control" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-3">
                <input data-bind="click: $root.createCurrency" type="button" class="btn btn-success btn-sm" value="@DbRes.T("Save", "Common")" />
                <input data-bind="click: cancelAdd" type="button" class="btn btn-warning btn-sm" value="@DbRes.T("Cancel", "Common")" />
            </div>
        </div>

    </div>

编辑div就像添加div一样，但使用不同的绑定，如data-bind =“value：IFSCode”

问题是在添加模式下它可以工作但是当我编辑时我什么也看不见在文本框元素中。

我也用来调试，在添加模式中，当我在文本框中键入内容时，我可以看到更改的observable，在编辑模式下，observable是emtpy并在键入内容时保留。

可能有些人帮忙请理解这段代码的含义非常感谢您的帮助。

敲门绑定mvc无法正常工作

0 个答案: