Question

我缩减了我的实际代码，但我无法完成这项工作。我正在使用knockoutjs和bootstrap与内联淘汰模板。我只是在div中放入一堆输入，但为了对齐原因我将其更改为表格。我知道属性名称是正确的，并且javascript控制台根本不会显示任何错误变量或绑定问题的错误。我将foreach放在一个TR标签而不是TBODY标签中，因为我不知道每次都会有多少个复选框，我不希望它们在行中完全正确，只有一个TR元素和一堆TD单元格内部那个TR标签现在。我怎样才能做到这一点？

<div id="Counties" class="well well-large checkbox inline">  
    <table class="table table-condensed">
                <tbody>
                    <tr data-bind="foreach: { data: counties
                                            }">
                        <td><input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name
                        </td>
                    </tr>
                </tbody>
            </table>
</div>

以下是我的viewModels：

function searchVm() {
    var self = this;
    self.counties = ko.observableArray([]); //array of jurisItem
}

function jurisItem(name, sid) {
    var self = this;
    self.name = name;
    self.sid = sid;
}

编辑：

我也尝试过基于knockoutjs文档，但它不起作用。我知道我可以使用jquery以其他方式做到这一点，但我更喜欢淘汰模板语法...

<table class="table table-condensed">
            <tbody>
                <tr>
                    <!-- ko foreach: $root.counties -->
                    <td>
                        <input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name
                    </td>
                    <!-- /ko -->
                </tr>
            </tbody>
        </table>

Answer 1

我不确定你想做什么。我做了一些样品。

HTML：

<div id="Counties" class="well well-large checkbox inline">  
    <table class="table table-condensed">
        <tbody>
            <tr data-bind="foreach: counties">
                <td>
                <input type="checkbox" data-bind="attr: { value: sid }" />
                <span data-bind="text: name" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

的javascript：

$(function () { 
    var SearchVm = function () {
        var self = this;
        self.counties = ko.observableArray([]);
    };

    var JurisItem = function (name, sid) {
        var self = this;
        self.name = name;
        self.sid = sid;
    }

    var item1 = new JurisItem("TestName1", "TestSid1");
    var item2 = new JurisItem("TestName2", "TestSid2");

    var searchViewModel = new SearchVm();
    searchViewModel.counties.push(item1);
    searchViewModel.counties.push(item2);
    ko.applyBindings(searchViewModel);

})

这适用于你：

http://jsfiddle.net/PVMjy/41/

knockoutjs表内联模板麻烦

1 个答案: