淘汰赛正在为单个 foreach 生成两个绑定答案

【问题标题】：Knockout is generating two bindings for single foreach淘汰赛正在为单个 foreach 生成两个绑定
【发布时间】：2013-06-21 21:07:44
【问题描述】：

我正面临头痛问题，导致我花了两天时间寻找解决方案。我希望有人能帮助我。我正在使用敲除为 HTML 标记生成带有 json 数据的绑定。但是，我无法更改元素的 css，因为我意识到该元素生成了两次并分配了相同的 id。这是我的代码的 sn-p

<div id = 'divBinder' data-bind="foreach: Results" >        
            <div id='rowStyle' class='eligibilitydivContentTableRow'  >
            <div class='eligibilitydivContentLeftCell' style="float:left;"  data-bind=" text: RequirementDescription"></div>
            <div class='eligibilitydivContentMiddleCell' style="float:left;">
            <span class='spanClass'></span>
            <input class='inputRadio' type='radio'  value:'true' data-bind="attr: { checked: IsChecked,'name': $index() }" />
            <span class='spanClass'></span>
            </div>
            <div class='eligibilitydivContentRightCell' style="float:left;"><span class='spanClass'></span>
            <input class='inputRadio2' type='radio' value:'false'  data-bind="attr: { checked: IsChecked, 'name': $index(), onclick:'testFunction.apply(this);return true;'}"     />
                <span class='spanClass'></span>
            </div>
            </div>
            <div data-bind=" attr: {'id': getSuffixRowID($index())}" style="display:none;"  >
            <div style="float:left;">
                <textarea > </textarea>
            </div>
            <div>
                <input type='text' id='dateField' onfocus='showDate()' /></div>
        </div>
          </div>

这是我用来生成 id 的 javascript 函数

function getSuffixRowID(suffix) {
       // alert(suffix);
        return 'hiddenRows' + suffix;
    }

这是我的绑定

  viewModel = [];
     viewModel.Results = ko.mapping.fromJS(globalizedData.Results);


     ko.cleanNode(document.getElementById("parentDivElement"));
     ko.applyBindings(viewModel, document.getElementById("parentDivElement"));

请注意，RequirementDescription 已正确绑定。唯一的问题是在选中按钮时通过调用 testFunction 来设置 css

function testFunction() {
        //    jQuery('#' + getSuffixRowID(this.attributes[6].nodeValue)).hide();
        var nodeId = this.attributes['name'].nodeValue;
        var stringValue = this.value;
        switch (stringValue) {
            case ('true'):
                viewModel.Results()[nodeId].IsCompleted(true);
                viewModel.Results()[nodeId].IsChecked(true);
               break;
            case ('false'):

               viewModel.Results()[nodeId].IsCompleted(false);
                viewModel.Results()[nodeId].IsChecked(false);
                var idName = getSuffixRowID(nodeId);
                 $('#' + idName).css('display', 'block !important;');
                break;
        }
    }

复选框元素的 id 是通过 foreach 中的 $index 变量分配的。通过查看生成的html页面，我实现了重复生成。它有两个重复的 foreach 标记。非常感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript json knockout.js knockout-mapping-plugin

【解决方案1】：

这不是您应该使用 KnockoutJS 编码的方式：

onclick:'testFunction.apply(this);return true;'}

Result 对象应该有两个属性（每个复选框一个）。所以假设你的 Result 对象看起来像：

var Result = function() {
    var self = this;
    self.checkbox1 = ko.observable();
    self.checkbox2 = ko.observable();
};

复选框的绑定将是：

onclick: $parent:testFunction, value : checkbox2

您可以根据需要添加 id 绑定。

还有TestFunction：

function testFunction(result/* the result item */) {
   if(result.checkbox2()) {

   }
   [...]
};

使用 Knockout，您无需直接修改视图。您必须利用 viewModel，并且敲除会为您修改视图。

也请查看visible binding。

希望对你有帮助。

【讨论】：