2012-03-28 54 views
0

我正在構建一個由JQuery項目和Knockout項目組成的網頁。KnockoutJS:無法更新選項值

基本上,該視圖具有選擇字段和由選擇值更改更新的sevond視圖。

我還有一個jQuery自動完成的文本框搜索字段。

我想要做的是當我在搜索框後按回車後,javascript將更新ko.observable值並觸發其更新,但它不工作。我已經成功地觸發按鍵,但我不能更新,並觸發更新..

繼承人的代碼:

 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> 
+1

你介意投入<form>標籤來包裝<input>

所以這成爲你正在使用的標記jsfiddle。 – madcapnmckay 2012-03-28 16:25:13

+0

對不起,但我無法設法將我的代碼放入jsfiddle ..也看起來像他們沒有在他們的選擇knockoutjs ... – dreampowder 2012-03-29 11:22:42

+2

您可以在資源部分添加KO。你可以把這一個http://jsfiddle.net/madcapnmckay/eHqj6/ – madcapnmckay 2012-03-29 17:07:14

回答

1

而不是

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

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

希望這會有所幫助!

+0

它的工作!感謝你的回答!並且對於遲到的迴應感到抱歉:) – dreampowder 2012-04-25 12:40:40

0

我在過去所做的那樣,以獲得進入關鍵的工作是從

<input type="text" data-bind="value:myValue"></input> 

<form> 
    <input type="text" data-bind="value:myValue"></input> 
</form> 
+0

我的問題不是輸入事件,它是關於觀察者沒有注意到的。它的工作現在,感謝您的幫助。 – dreampowder 2012-04-25 12:59:54