0
正如標題所示,我正試圖將可觀察值的值添加到另一個可觀察值。 我收到了奇怪的結果,我想知道如果我是以正確的方式進行操作。將可觀察值添加到另一個可觀察值
FIDDLE在底部
HTML:
<div id="wrapper">
<ul class="empiriHelp" data-bind="foreach: empiriHelp"><li data-bind="text: title"></li></ul>
<ul class="empiricount" data-bind="foreach: $data.empiriLines">
<li data-bind='event: {mouseover: $root.empiriMouseOver, mouseleave: $root.empiriMouseLeave}'>
<input class="empiri_amount" data-bind="value: $data.amount"/>
<select data-bind="options: $root.measurements, value: $data.unit = $root.selectedUnit"></select>
<input class="empiri_ingredient" type="text" data-bind="value: $data.ingredient, returnKey: $root.empiriAddLine.bind($data, $index())" />
<div class="empiri_fader">
<div class="empiri_add" data-bind="click: $root.empiriAddLine.bind($data, $index())"></div>
<div class="empiri_delete" data-bind="click: $root.empiriRemoveLine.bind($data, $index())"></div>
</div>
</li>
</ul>
</ul>
</div>
的Javascript:
$(document).ready(function()
{
var viewModel = function(){
var self = this;
self.selectedUnit = ko.observable();
self.selectedUnit.subscribe(function(value) {
console.log(value);
});
self.measurements = ko.observableArray([
ko.observable('Kg'),
ko.observable('g'),
ko.observable('L'),
ko.observable('dl'),
ko.observable('cl'),
ko.observable('tbps'),
ko.observable('tsp'),
ko.observable('cl')
]);
self.empiriHelp = [{title: "amount"}, {title: "unit"}, {title: "ingredient"}];
self.empiriLines = ko.observableArray([{ amount: ko.observable(''), unit: ko.observable(self.measurements[0]), ingredient: ko.observable('') }]);
self.empiriAddLine = function(index){
self.empiriLines.splice(index+1,0,{ amount: ko.observable(''), unit: ko.observable(self.measurements[0]), ingredient: ko.observable('') });
}
self.empiriRemoveLine = function(index){
if(self.empiriLines().length!=1){
self.empiriLines.splice(index,1);
}
}
self.empiriMouseOver = function(data, event){
$(event.currentTarget).find(".empiri_fader").stop(true, true).fadeIn(200);
}
self.empiriMouseLeave = function(data, event){
$(event.currentTarget).find(".empiri_fader").stop(true, true).fadeOut(200);
}
}
ko.applyBindings(new viewModel);
的問題是,當選擇值的變化,它的所有empirilines變化值我不明白...不應該$數據是上下文敏感的,只能引用foreach中的當前循環項目?我的猜測是我以錯誤的方式約束了可觀察的事物。我一直在盯着這個頭腦,這太久了,我的腦子很麻利。
我今天不能腦,我有愚蠢的 - halp!
這裏的小提琴: http://jsfiddle.net/Y9Caw/
你是一個金色的神布蘭登。我仍然有理解無參數擴展的方法。我沒有意識到,只要添加「value:」就會將該變量傳遞給下一個可能的地方,並且我正在創建適合我正常編碼模式的解決方法...... – Eirinn
數據綁定字符串是_just_ JavaScript對象字面值用你的viewmodel中的javascript [with](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with)子句在你的html中加入引號。它就像你用javascript寫的一樣:'with(viewmodel){var x = {value:unit,text:amount}; ...} ......一旦你意識到這一點(並且假設你知道JavaScript中的對象文字是什麼),那麼理解數據綁定語法就變得更容易了。 – Brandon