敲除加载和保存视图模型

Posted 2023-03-27

【中文标题】敲除加载和保存视图模型

【英文标题】：Knockout loading and saving view model

【发布时间】：2018-07-26 19:44:35

【问题描述】：

我有以下代码，是我在两个部分（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>

【参考方案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>