Question

i am working on a webpage that consists a JQuery item and a Knockout Item.

basically the view has a select field and a sevond view that is being updated by the select value change.

also i have a textbox search field with jquery autocomplete.

What i want to do is when i press enter after on the search box, the javascript will update the ko.observable value and trigger the ther updates yet its not working. i’ve managed to trigger keypress but i cant update and trigger the update..

Heres the code:

        function Station(data){
        var self = this;
        this.userId = ko.observable(data.userid);
        this.displayName = ko.observable(data.displayName);
        this.email = ko.observable(data.email);
        this.redirectURL = ko.computed(function(){
            return "/someurl/somerequest?userId="+self.userId();
        });
        this.selectText = ko.computed(function(){
            return self.displayName();
        })
    }

    function currentStation(index)
    {
        return self.stations()[index];
    }

    function StationViewModel(){
        var self = this;
        self.stations = ko.observableArray([]);

        $("#stationSelect").attr("disabled,true");
        $.getJSON("@{someurl.getStationList()}",function(allData){
            var mappedStations = $.map(allData,function(item)
                    {
                    return new Station(item);
                    });
            self.stations(mappedStations);
            $("#stationSelect").attr("disabled,false");
        });

        url = "/someurl/somerequest?userId=";

        this.selectedStation = ko.observable();
        this.redirectToStation = function(){
            var linkToSend = 
            alert(self.selectedStation.redirectURL());
        }


<!-- THIS IS THE CODE THAT HAS TO UPDATE THE FIELD BUT IT DOESN'T-->
        this.getStation = function(event)
        {
            for(i = 0; i<this.stations().length;i++)
                {
                    if(this.stations()[i].userId()==$("#search").val())
                        {
                        self.selectedStation = ko.observable(this.stations()[i]);  //Am i doing it right?
                        }
                }
        };
    }


<!-- This is the code That handles the click event inside the textbox. its working -->

    ko.bindingHandlers.executeOnEnter = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var allBindings = allBindingsAccessor();
                $(element).keypress(function (event) {
                    var keyCode = (event.which ? event.which : event.keyCode);
                    if (keyCode === 13) {
                        allBindings.executeOnEnter.call(viewModel);
                        return false;
                    }
                    return true;
                });
            }
        };
    ko.applyBindings(new StationViewModel());
    </script>

Answer 1

Instead of

self.selectedStation = ko.observable(this.stations()[i]);

do

self.selectedStation(this.stations()[i]);

Hope this helps!