knockoutjs table inline template troubles

问题

I slimmed down my actual code but I can't get this work. I am using knockoutjs and bootstrap with inline knockout templates. I use to just put a bunch of input's inside a div but I changed it to a table for alignment reasons. I know the property names are correct and the javascript console doesn't show any errors at all for bad variables or binding issues. I am putting the foreach in a TR tag instead of the TBODY tag because I don't know how many checkboxes I will have every time and I don't want them in rows exactly, just one TR element and a bunch of TD cells inside that one TR tag for now. How can I make this work??

<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>

Here are my 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;
}

Edit :

I also tried this based on knockoutjs documentation and it doesn't work. I know I can do this in other ways using jquery but I would prefer knockout template syntax...

<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>

回答1:

I am not sure what are You trying to do. I made some sample.

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);

})

Does this work for You:

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

来源：https://stackoverflow.com/questions/14487209/knockoutjs-table-inline-template-troubles

标签

javascript

html

mvvm

twitter-bootstrap

knockout.js