Загрузка и сохранение модели нокаута

1

У меня есть следующий код, это пример одной модели представления, которую я использую в двух разделах (2 модальности загрузки). Но я не могу получить доступ к значению из второй модели представления "UpdateviewModel". Когда я нажимаю кнопку "Сохранить" в первом модуле, нет проблем, я получаю значение "Имя", но когда я нажимаю кнопку "Обновить" во втором модальном, значение "Имя" не определено. Что я делаю неправильно?

$(document).ready(function () {

    CustomerSetupViewModel = function () {
        var self = this;

        self.Name = ko.observable();

        var CustomerSetup = {
            Name: self.Name
        };
        
        self.CustomerSetup = ko.observable();

        self.GetCustomer = function () {            
            var data = { Name: "A00622" };
            self.CustomerSetup(data);            
        }

        Save = function () {        
            var test = viewModel.Name();            
        }

        Update = function () {                
            var test2 = UpdateviewModel.Name();            
        }        
    }

    var viewModel = new CustomerSetupViewModel();
    var UpdateviewModel = new CustomerSetupViewModel();

    ko.applyBindings(viewModel, document.getElementById("NewCustomer"));
    ko.applyBindings(UpdateviewModel, document.getElementById("UpdateCustomer"));    

    $("#updateCustomer").click(function () {
        UpdateviewModel.GetCustomer();
    });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<a id="addCustomer" class="btn btn-default" data-toggle="modal" data-target="#NewCustomer">Add Customer</a>
<a id="updateCustomer" class="btn btn-default" data-toggle="modal" data-target="#UpdateCustomer">Update Customer</a>

<!-- Modal -->
<div id="NewCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="NewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="NewModalLabel">New Customer</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: Name" />                                
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a role="button" class="btn btn-primary" data-bind="click: Save">Save</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="UpdateCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="NewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="NewModalLabel">New Customer</h4>
            </div>
            <div class="modal-body" data-bind="foreach: CustomerSetup">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: Name" />
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a id="Update" class="btn btn-default" data-bind="click: Update">Update</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Теги:
asp.net-mvc
mvvm
knockout.js

1 ответ

1

Я не уверен в проблеме, так как я пытался записать ваш UpdateviewModel, это был пустой объект.

Я создал ваш код, но будут изменения только для структуры кодирования с использованием mainViewModel и содержимого subViewModel.

$(document).ready(function () {
    var CustomerSetupViewModel = function () {
      var self = this;

      self.Name = ko.observable("");

      self.Save = function () {        
        var test = self.Name();            
        alert(test);
      }

      self.Update = function () {                
        var test2 = self.Name();       
        alert(test2);          
      }        
    }
    
    var MainViewModel = function () {
      console.log("init")
      self = this;
      self.CustAdd = new CustomerSetupViewModel();
      self.CustUpd = new CustomerSetupViewModel();
    }
    
		vm = new MainViewModel();
    ko.applyBindings(vm); 
    
    
		$("#updateCustomer").click(function () {
        vm.CustUpd.Name("ToBeUpdated");
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<a id="addCustomer" class="btn btn-default" data-toggle="modal" data-target="#NewCustomer">Add Customer</a>
<a id="updateCustomer" class="btn btn-default" data-toggle="modal" data-target="#UpdateCustomer">Update Customer</a>

<!-- Modal -->
<div id="NewCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="NewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="NewModalLabel">New Customer</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: CustAdd.Name" />                                
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a role="button" class="btn btn-primary" data-bind="click: CustAdd.Save">Save</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="UpdateCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="UpdateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="UpdateModalLabel">Update Customer</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: CustUpd.Name" />                                
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a role="button" class="btn btn-primary" data-bind="click: CustUpd.Update">Update</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню