2014-02-12 58 views
0

我在另一個列表中有一個下拉列表,可以添加項目,然後用戶可以通過更改下拉列表更改他們添加的項目。訂閱KnockoutJS選項列表值

這個作品在這裏,當我添加選擇的下拉正確的值項:

<tbody data-bind="foreach: items"> 
<tr> 
    <td> 
     <select data-bind=" 
      options: materials, 
      optionsValue: 'MaterialName', 
      optionsText: function(item) { 
       return item.MaterialGroup + ': ' + item.MaterialName; 
      }, 
      optionsCaption: '[Choose a Material]', 
      value : selectedMaterial(), 
      attr: { name: 'MaterialOrderLine[' + $index() + '].MaterialName' }"></select> 
    </td> 
    ... 

的這一切,目前的偉大工程。但現在我的挑戰是我現在需要添加一個訂閱這個下拉菜單來做其他事情,當選定的下拉列表值發生變化時,我認爲我可以很容易地做到這一點,但訂閱這裏不起作用:

function MaterialItem(material, qty) { 

    var self = this; 
    self.materials = ko.observableArray([]); 

    //this populates the dropdown lists inside the grid 
    $.when(
     $.ajax({ 
      url: '...', 
      dataType: 'JSON', 
      type: 'POST', 
      data: JSON.stringify({... }), 
      contentType: 'application/json; charset=utf-8' 
     }) 
    ).done(function (result) { 
     for (var i = 0; i < result.length; i++) { 
      self.materials.push(result[i]); 
     } 
    }); 

    self.material = material; 
    self.qty = qty; 
    self.selectedMaterial = ko.observable(material); //used to hold selected value on mat'l dropdown 

    this.selectedMaterial.subscribe(function (newValue) { 
     alert('f'); 
    }.bind(self)); 

}

此訂閱根本不起作用。不過,我可以讓它改變我的HTML工作:從 「值:selectedMaterial()」 到「值:selectedMaterial」

但是,當我作出這樣的變化,在下拉列表中值不再設置正確(它默認爲選擇列表中的第一個項目)。

+0

不知道是什麼的'.bind(個體經營)'是對認購方式結束?以前沒見過。如果你刪除了會發生什麼? – Tanner

+0

你也可以指定一個可觀察的值,如下所示:'self.material(material);'不像這樣'self.material = material;' – Tanner

+0

我試過它和無.bind(self)。這是我在類似問題上發現的一個建議,它不起作用。 – joel

回答

0

我覺得是Knockout value not being set in function

的選項列表中的重複觀測的,所以當選擇綁定的selectedMaterial觀察到已經被複位後的值被設定。

一對夫婦的其他東西......

  • 不要叫observableArray在一個循環推,將導致所有綁定到重燒每個操作。要麼調用拼接,要麼只是設置數組值。

  • 你不需要使用bind(self)。所有這些都是將函數內的環境「this」設置爲引用「self」。你已經在一個變量中捕獲了自己,所以就是我們自己。


.done(function (result) { 
    self.materials(result); 
    self.selectedMaterial(self.material); 
}