Question

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

<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标记。任何帮助都非常感谢。

由于

Answer 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和knockout将为你修改视图。

请同时查看visible binding。

我希望它有所帮助。

Knockout正在为单个foreach生成两个绑定

1 个答案: