0

I am trying to call this function "CallAgain()" from click of a button but I am unable to do so. Can someone please advise what I am doing wrong? The second button with data-bind is working fine.

Here is the HTML:

<input id="slid" data-bind="attr: {min: 1, max: MaxPage}, value: CurrPage" type="range"  data-highlight="true">
<hr/>
X1=<span data-bind="text: CurrPage"></span></br>
X2=<span data-bind="text: MaxPage"></span>
<hr>
<button onclick="alert(x1);">Call Again</button>
<button data-bind="click: changeCurrent">Change current</button>

And here is JS code:

var x1 = 8,
    x2 = 10;

function CallAgain() {

    alert("AAA");
    var vm = new AppViewModel();
    //if ( FirstRun == true ) ko.applyBindings(vm);
    x1++;
    x2++;
    vm.CurrPage(x1);
    vm.MaxPage(x2);
    vm.changeCurrent(); 
    FirstRun = false;

}



function ViewModel () {
    this.CurrPage = ko.observable(x1);
    this.MaxPage = ko.observable(x2);

    this.CurrPage.subscribe(function (value) {
        x1 = value;
    });

    this.changeCurrent = function () {
        x1++;
        x2++;
        this.CurrPage(x1);
        this.MaxPage(x2);
        alert( this.CurrPage() );
        $('#slid').slider("refresh");
    }
};

ko.applyBindings(new ViewModel());

Here is the jsfiddle link for the code

Thanks

Update-1

here is the revised jsfiddle

ChangeCurrent button, which calls changeCurrent() function directly, does update x1 & x2 values in DOM but Call Again button doesn't change them. The second problem is that the slider doesn't update although it has its attributes data-bound.

Any advice please?

AnR
  • 1,809
  • 3
  • 26
  • 45
  • 1
    You're not using *knockout* in the "onclick" code. For that reason, the variable x1 isn't available in the scope where alert is running – Loïc Faure-Lacroix Jan 17 '14 at 14:15
  • But alert("AAA") should work at least? – AnR Jan 17 '14 at 14:17
  • And if I comment out the last row and instead uncomment this one [if ( FirstRun == true ) ......] then everything stops working. – AnR Jan 17 '14 at 14:19
  • Your alert(x1); doesn't work because x1 is undefined. There is no x1 in global scope as you declare it in onDomready function. The same for CallAgain. – mt_serg Jan 17 '14 at 14:24
  • So what should I do? Enclosing that within $(document).ready(function(){ } doesn't work – AnR Jan 17 '14 at 14:41
  • Can you please update the jsfiddle code and guide? – AnR Jan 17 '14 at 14:49
  • All you need to do in the fiddle is change the onDomReady dropdown to nowrap. Alternatively, you could remove the var before x1 and x2 so that they're added to the global namespace but I wouldn't recommend that. – DoctorMick Jan 17 '14 at 15:32
  • Thanks @DoctorMick. Please see the Update-1 above and advise. Thx – AnR Jan 17 '14 at 16:16
  • Well that took a while to spot! :) You're binding a one instance of a view model and then setting vm to another instance. See: http://jsfiddle.net/X82aC/501/ – DoctorMick Jan 17 '14 at 16:51
  • Oh, and I'm not sure the knockout value binding works with a range input (could be wrong). You can use the jquery ui slider with a custom binding tho: http://stackoverflow.com/questions/12856112/using-knockout-js-with-jquery-ui-sliders – DoctorMick Jan 17 '14 at 16:54
  • Thanks. It works with range input. However the only issue that I am now facing is that the slider doesn't automatically refresh itself. And I do not want to use binder."refresh" because it causes flicker which was the only reason why I started exploring knockout. – AnR Jan 17 '14 at 17:20
  • In fact if I change "no wrap" to "onLoad" then the binding starts. However in that case "Call Again" doesn't work and the slider's pointer doesn't refresh, despite the changing value. What can be the reason? Please see this: http://jsfiddle.net/X82aC/502/ – AnR Jan 17 '14 at 17:36

0 Answers0