當從另一個生成列表時，填充一個對象的observable屬性

Question

我試圖填充一個對象的可觀察屬性，當我從中選擇的列表從另一個對象生成時。選擇的選項是$root.Rider的屬性，而選定的選項是$root的屬性。

如果我在選擇標籤的綁定中使用value: selectedContract（如示例中所示），選擇一個選項將更改selectedContract，但在加載時未選擇預設的selectContract。

如果我將值更改爲value: payment_contract().option_value，並添加optionsValue:'option_value'，預置填充負載但selectContract從選項列表中選擇時，不會更新。

代碼：

$(function() { 
 
    ko.applyBindings(new ViewModel()); 
 
}); 
 

 
var ViewModel = function() { 
 
    var self = this; 
 
    self.selectedContract = ko.observable(); 
 
    self.rider = new Rider({ 
 
     id: 11 
 
    }); 
 
    contract = new Contract({ 
 
     terms: 'Terms 2', 
 
     account_id: '2', 
 
     account_name: 'Account 2' 
 
    }); 
 
    self.selectedContract(contract) 
 
}; 
 

 
//Rider 
 
function Rider(data) { //charge options and prepaid options are arrays of contract objects 
 
    var self = this; 
 

 
    self.id = data.id; 
 
    self.contract_options = ko.observableArray(); 
 
    //populate contract_options for demo 
 
    var contract = new Contract({ 
 
     terms: 'charge', 
 
     account_id: '1', 
 
     account_name: 'Account 1' 
 
    }); 
 
    self.contract_options.push(contract); 
 
    contract = new Contract({ 
 
     terms: 'charge', 
 
     account_id: '2', 
 
     account_name: 'Account 2' 
 
    }); 
 
    self.contract_options.push(contract); 
 
    contract = new Contract({ 
 
     terms: 'charge', 
 
     account_id: '3', 
 
     account_name: 'Account 3' 
 
    }); 
 
    self.contract_options.push(contract); 
 
} 
 

 
function Contract(data) { 
 
    var self = this; 
 

 
    self.terms = data.terms; 
 
    self.contract_id = data.contract_id; 
 
    self.account_id = data.account_id; 
 
    self.account_name = ko.observable(data.account_name); 
 
    self.option_value = ko.computed(function() { 
 
     return self.account_id + '|' + self.contract_id; 
 
    }); 
 
};

<select name="contract_id_charge" data-bind="options: rider.contract_options, 
 
    value: selectedContract, 
 
    optionsText: 'account_name', 
 
    optionsCaption: 'Select Charge' 
 
"></select> 
 
<div data-bind="with: selectedContract"> 
 
    <div> 
 
     <label>Terms:</label><span data-bind="text: terms"></span> 
 
    </div> 
 
    <div> 
 
     <label>Account Id:</label><span data-bind="text: account_id"></span> 
 
    </div> 
 
    <div> 
 
     <label>Account Name:</label><span data-bind="text: account_name"></span> 
 
    </div> 
 
</div>

Sample fiddle

Answer 1

我盡力回答給了你怎樣做複雜的問題。而不是使用optionsValue綁定您的選擇，只需使用值綁定。這可以綁定到一個observable，它將使用charge_options中的選項進行填充。

<select name="contract_id_charge" 
data-bind="options: contract_options(), 
    value: selectedContract, 
    optionsText: 'account_name', 
    optionsCaption: 'Select Charge' 
"></select> 
<div data-bind="with: selectedContract"> 
    <div> 
     <label>Terms: </label><span data-bind="text: terms"></span> 
    </div> 
    <div> 
     <label>Account Id: </label><span data-bind="text: account_id"></span> 
    </div> 
    <div> 
     <label>Account Name: </label><span data-bind="text: account_name"></span> 
    </div> 
</div> 

var ViewModel = function() { 
    var self = this; 
    self.selectedContract = ko.observable(); 

    self.contract_options = ko.observableArray(); 

    //populate contract_options for demo 
    var contract = new Contract ({ 
     terms: 'Terms 1', 
     account_id: '1', 
     account_name: 'Account 1' 
    }); 
    self.contract_options.push(contract); 
    contract = new Contract ({ 
     terms: 'Terms 2', 
     account_id: '2', 
     account_name: 'Account 2' 
    }); 
    self.contract_options.push(contract); 
    contract = new Contract ({ 
     terms: 'Terms 3', 
     account_id: '3', 
     account_name: 'Account 3' 
    }); 
    self.contract_options.push(contract); 
}; 

function Contract(data) { 
    var self = this; 

    self.terms = data.terms; 
    self.contract_id = data.contract_id; 
    self.account_id = data.account_id; 
    self.account_name = ko.observable(data.account_name); 
    self.option_value = ko.computed(function() { 
     return self.account_id + '|' + self.contract_id; 
    }); 
}; 

http://jsfiddle.net/x6appqz0/

Answer 2

您的問題是，你濫用你的<select>標籤value數據綁定。

使用<select>標記，options綁定指定選項列表，並且數據綁定應該指定一個observable來保存當前選定選項的值。

取而代之的是：value: payment_contract().option_value，它是一個只讀計算;而不是成爲持有選定合約的觀察員。如果您指定value: payment_contract，則根據需要將選定的合約存儲在可觀察的乘坐的payment_contract中。

另外，對於給定選項，optionValue綁定指定應該將哪個值存儲在由value綁定指定的可觀察值中。您正在使用一些基於account_id和contract_id的字符串;但似乎更有可能您只想存儲對整個Contract對象的引用;而不是一個字符串表示，所以綁定可能會被忽略。

下`標籤似乎工作：

<select name="contract_id_charge" 
    data-bind="options: rider().charge_options(), 
     value: payment_contract, 
     optionsText: 'account_name', 
     optionsCaption: 'Select Charge' 
    "> 
</select>