将可观察值添加到另一个可观察值

正如标题所示，我正试图将可观察值的值添加到另一个可观察值。我收到了奇怪的结果，我想知道如果我是以正确的方式进行操作。将可观察值添加到另一个可观察值

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/

来源

2013-06-18 Eirinn

其实，只是去掉= $root.selectedUnit似乎做你想做什么：

value: $data.unit = $root.selectedUnit

http://jsfiddle.net/bman654/Y9Caw/2/

来源

2013-06-18 21:57:13 Brandon

你是一个金色的神布兰登。我仍然有理解无参数扩展的方法。我没有意识到，只要添加“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

将可观察值添加到另一个可观察值

回答

相关问题