knockoutjs表内联模板麻烦 [英] knockoutjs table inline template troubles

问题描述

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

 < div id =Countiesclass =well well-large checkbox inline > 
< table class =table table-condensed> 
< tbody> 
< tr data-bind =foreach：{data：county 
}> 
< td>< input type =checkboxdata-bind =attr：{value：$ data.sid}/>$data.name 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

以下是我的viewModels：

  function searchVm（）{
 var self = this; 
 self.counties = ko.observableArray（[]）; // jurisItem数组
} 
 
函数jurisItem（name，sid）{
 var self = this; 
 self.name = name; 
 self.sid = sid; 
} 
  

编辑：

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

$ p $ < table class = table table-condensed>
< tbody>
< tr>
<！ - ko foreach：$ root.counties - >
< td>
< input type =checkboxdata-bind =attr：{value：$ data.sid}/>$data.name
< / td>
<！ - / ko - >
< / tr>
< / tbody>
< / table>


解决方案

我不确定您要做什么。我做了一些示例。

html：

 < div id =Countiesclass =well well-large checkbox inline> 
< table class =table table-condensed> 
< tbody> 
< tr data-bind =foreach：county> 
< td> 
< input type =checkboxdata-bind =attr：{value：sid}/> 
< span data-bind =text：name/> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

javascript：

 < code $（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）; 
 $ b $）
  

这是否适合您：

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

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>

解决方案

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/

这篇关于knockoutjs表内联模板麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！