knockout.js - ネストされたテンプレートバインディング+ノックアウトjs

Question

このようなノックアウトマッピングを使用してテンプレートをバインドしたい

Question 1
       Option1
       Option2
       Option3
Question 2
       Option1
       Option2
       Option3
Question 3
        Option2
        Option3

任意の助けのためにいくつかのサンプル コード thax を提供してください。

Answer 1

これは簡単な例です:

HTML コード:

<script type="text/html" id="SimpleTemplate">
    <li>
        <div>
            <span data-bind="text: name"> 
            options:  
        </div>
        <ul data-bind="foreach: option">
            <li>
                <span data-bind="text: $data"> </span>              
            </li>
        </ul>
    </li>
</script>
<ul  data-bind="
            template: {
            name: 'SimpleTemplate',
            foreach: questions
            }">
</ul>

ノックアウト：

var Question= function(name, option) {
    this.name = name;
    this.option = ko.observableArray(option);  
};

var viewModel = {
    questions: [
        new Question("Question1", ["option1", "option2", "option3"]),
        new Question("Question2", ["option1", "option2", "option3"]),
        new Question("Question3", ["option1", "option2"])
        ]    
};

ko.applyBindings(viewModel);