Knockout加载和保存视图模型

时间：2018-02-15 22:54:51

标签： javascript asp.net-mvc html5 mvvm knockout.js

我有以下代码，是我在两个部分（2个引导模态）中使用的一个视图模型的示例。但我无法从第二个视图模型“UpdateviewModel”访问该值。当我在第一个模态中单击“保存”按钮时没有问题，我得到了Name值，但是当我在第二个模态中单击“更新”按钮时，“名称”值未定义。我做错了什么？

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

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题