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.
Unfortunately, activation email could not send to your email. Please try again.

knockout binding with valueHasMutated

Thread ID:

Created:

Updated:

Platform:

Replies:

131826 Jul 28,2017 07:32 PM Aug 2,2017 02:09 PM JavaScript 3
loading
Tags: ejDatePicker
Abram
Asked On July 28, 2017 07:32 PM

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>

Berly Christopher [Syncfusion]
Replied On August 1, 2017 11:12 AM

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 


Abram
Replied On August 1, 2017 05:47 PM

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>


Berly Christopher [Syncfusion]
Replied On August 2, 2017 02:09 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;