Question

<!DOCTYPE html>
<html>
    <head>
        <title>Knockout Template With Inner Foreach</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="knockout-min.js"></script>
    </head>
    <body>
        <div id="mainDiv" data-bind="template: { name: currentSection }" style="border: 1px solid red">

        </div>
        <button data-bind="click: next">Next</button>


        <div id="templatesZone" style="display:none">
            <div id="template1">
                template1
            </div>
            <div id="template2">
                template2
            </div>
            <div id="template3">
                <div data-bind="foreach: customers">
                    <div class="customerDiv">
                        <span data-bind="text: name"></span>
                        <span data-bind="text: age"></span>
                    </div>
                </div>
            </div>
        </div>

        <p data-bind="text: currentSection"></p>
        <p data-bind="text: currentSectionKey"></p>

        <script type="text/javascript">
            function Customer(name, age) {
                var self = this;

                self.name = name;
                self.age = age;
            }

            function testViewModel() {
                var self = this;

                self.customers = ko.observableArray([
                    new Customer("Jake", 25), 
                    new Customer("Ritchie", 44), 
                    new Customer("Clarence", 34),
                    new Customer("Vince", 22)
                ]);
                self.templates = [
                    "template1",
                    "template2",
                    "template3",
                ];
                self.currentSectionKey = ko.observable(0);


                self.nextEnabled = ko.computed(function() { 
                    return ( self.currentSectionKey() < (self.templates.length - 1) );
                });

                self.next = function() {
                    if(self.nextEnabled()) { 
                        self.currentSectionKey( self.currentSectionKey() + 1 );
                    }
                };

                self.currentSection = ko.computed(function() {
                    return self.templates[self.currentSectionKey()];
                });

            }

            $(document).ready(function() {
                ko.applyBindings(new testViewModel());
            });
        </script>
    </body>
</html>

我使用动态模板。其中一个模板有一个关于客户的foreach。我已经定义了4个客户。我在template3中得到了4个客户的4倍。我犯了错误吗？或者这是淘汰赛中的错误？

的jsfiddle： http://jsfiddle.net/kamikazefish/bXym5/

Answer 1

要查看错误，只需删除display:none上的templesZone即可。在applyBindings之后，您的绑定也会应用到您的模板中，以便更改它们。您应该将它们从div更改为<script type="text/html"></script>。

这是修改过的jsfiddle：http://jsfiddle.net/bXym5/1/

内部Foreach的淘汰赛JS模板

1 个答案: