We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. knockout binding with valueHasMutated

knockout binding with valueHasMutated

I am getting a javascript error with the following code in the syncfusion  JavaScript Playground.  It works if I replace the valueHasMutated with the commented our lines: //vm.date(null);
//vm.date(new Date()); 

If I remove the script reference of ej.widget.ko.min.js it renders the date in the plain input field.

Thanks,
Abram

<!doctype html>
<html>
<head>
    <title>Essential Studio for JavaScript : Autocomplete - KnockOut</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
    <link rel='nofollow' href="15.2.0.43/external/bootstrap.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/15.2.0.43/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link rel='nofollow' href="15.2.0.43/themes/web/content/default.css" rel="stylesheet" />
    <link rel='nofollow' href="15.2.0.43/themes/web/content/default-responsive.css" rel="stylesheet" />        
    
    <script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>    
    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//cdn.syncfusion.com/15.2.0.43/js/web/ej.web.all.min.js "></script>
    <script src="15.2.0.43/scripts/web/properties.js" type="text/javascript"></script>
    <script src="//cdn.syncfusion.com/js/assets/external/knockout.min.js" type="text/javascript"></script>
    <script src="//cdn.syncfusion.com/15.2.0.43/js/common/ej.widget.ko.min.js" type="text/javascript"></script>
</head>
<body>
  <form id="myForm">
    <input data-bind='ejDatePicker: {value: date}' />
    <br/>
    <input data-bind='value: date' />
  <span>Your selection: <span data-bind="text: date"></span>
  </form>
  
    <script type="text/javascript">
        $(function () {
            // declaration             
            var ViewModel = function () {
              this.date = ko.observable();
              
            };
          
            var vm = new ViewModel()
            ko.applyBindings(vm);
          vm.date(new Date());
          document.getElementById("myForm").reset();
          //works if I set the value to null and then back
          //vm.date(null);
          //vm.date(new Date());
          vm.date.valueHasMutated();
        });
    </script>
</body>
</html>

3 Replies
BC Berly Christopher Syncfusion Team August 1, 2017 03:12 PM UTC

Hi Abram, 

Thanks for your patience. 

Query1: 
I am getting a javascript error with the following code in the syncfusion JavaScript Playground.  It works if I replace the valueHasMutated with the commented our lines: //vm.date(null);
//vm.date(new Date());  
 
Answer: 
We would like let you know that, valueHasMutated() is used to notify the subscribers when the value has been changed but not with view. It may happen with array values where single object change may not reflect with views. In this case we can use valueHasMutated.  
 
But, in the given sample the latest value updated and binding correctly with ejDatePicker. So there is no need to call valueHasMutated() in the sample.  
 
Also, if you are using this valueHasMuated for any other case or we misunderstood your requirement, please get back to us with more information. 
 
Please get the sample from the below link: 
 
Also, please refer the below stackoverflow link to know more about valueHasMutated() while using observable arrays. 
 
 
Query 2: 
If I remove the script reference of ej.widget.ko.min.js it renders the date in the plain input field. 
 
Answer: 
“ej.widget.ko.min.js” file is used to provide Knockout support in JS. If you not referred the “ej.widget.ko.min.js” file in your application, the date value is updated in the input box. Because you have bind the date value to the value field for the “input Box” in the given sample. Please make use of this script file in the application to enable knockout support. 
While checking this issue with you sample, it seems you have bind the date value with blank input element and it  
 
Regards, 
Berly B.C 


AB Abram August 1, 2017 09:47 PM UTC

I ran into this issue again with the following example when hitting the clear button immediately.  Strangely I got both examples to work by initializing the date observable differently: this.date = ko.observable(null);


<!doctype html>


<html>


<head>


    <title>Essential Studio for JavaScript : Autocomplete - KnockOut</title>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />


    <link rel='nofollow' href="15.2.0.43/external/bootstrap.css" rel="stylesheet" />


    <link rel='nofollow' href="//cdn.syncfusion.com/15.2.0.43/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />


    <link rel='nofollow' href="15.2.0.43/themes/web/content/default.css" rel="stylesheet" />


    <link rel='nofollow' href="15.2.0.43/themes/web/content/default-responsive.css" rel="stylesheet" />        


    


    <script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>    


    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>


    <script type="text/javascript" src="//cdn.syncfusion.com/15.2.0.43/js/web/ej.web.all.min.js "></script>


    <script src="15.2.0.43/scripts/web/properties.js" type="text/javascript"></script>


    <script src="//cdn.syncfusion.com/js/assets/external/knockout.min.js" type="text/javascript"></script>


    <script src="//cdn.syncfusion.com/15.2.0.43/js/common/ej.widget.ko.min.js" type="text/javascript"></script>


</head>


<body>


  <form id="myForm">


    <input data-bind='ejDatePicker: {value: date}' />


    <input data-bind='value: date' />


    <span>Your selection: <span data-bind="text: date"></span>


    <button data-bind='click:clear'>Clear    


    </button>  


  </form>


  


    <script type="text/javascript">


        $(function () {


            // declaration             


            var ViewModel = function () {


              this.date = ko.observable();


              var self = this;


              self.clear = function(){



                self.date(null);


              };


            };


          


            var vm = new ViewModel()


            ko.applyBindings(vm);


        });


    </script>


</body>


</html>


BC Berly Christopher Syncfusion Team August 2, 2017 06:09 PM UTC

Hi Abram,  
We were unable to reproduce the reported issue. While we are giving “this.date = ko.observable(null);” it makes DatePicker and TextBox value as same. While checking with your query, we have noticed that you are using “two-way binding” to bind the DatePicker value and TextBox value. We would like to let you know that, if you make any changes in one value it reflects on another binding component value. This is the default behavior of two-way binding.  
Please get the sample from the below link: 
If still you are facing problem please get back to us with more details that will help us to provide exact solution. 
Regards, 
Berly B.C 


Loader.
Up arrow icon