0

私は KnockoutJS 初心者です。

以下に記述されたビューがあり、実行時に各カテゴリのカテゴリ変数が表示されません。ここで何が間違っているのか見てみてください。

ご協力いただきありがとうございます。

私のコードビュー:

<table class="table">
    <thead>
    </thead>
    <tbody data-bind="foreach: categories">
        <tr>
            <td data-bind="text: Name">
                <table>
                    <tbody data-bind="foreach: categoryVariables">
                        <tr>
                            <td data-bind="text: Name"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>

<script type="text/javascript">

    var resumeDataViewModel;

    function Category(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;

        self.categoryVariables = ko.observableArray([
            new CategoryVariable({ID: '1', Name: 'asd'})
        ]);
    }

    function CategoryVariable(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;
    }

    function ResumeDataViewModel() {
        var self = this;

        self.categories = ko.observableArray([
            new Category({ID: '1', Name : 'Contact', Category: {ID: '1', Name: 'gfdg'}}),
            new Category({ID: '2', Name : 'Education', Category: {ID: '2', Name: 'asdasd'}})
        ]);

        self.addCategory = function(){
            self.categories.push(new Category({
                Name: "sa d"
            }));
        }

        self.addCategoryVariable = function (category) {
            category.categoryVariables.push(new CategoryVariable({
                Name: 'asd'
            }));
        }
    }

    ko.applyBindings(resumeDataViewModel = new ResumeDataViewModel());
</script>

あなたの返事を探しています。本当にありがとうございます。

4

1 に答える 1

3

あなたの問題は、テキストのバインディングにあります: 名前と同じ td にテーブルを追加します。categoryVariables のテーブルを別の TD に移動しましたが、正常に動作します。

TD のテキストをバインドしたので、Ko のデータ バインディングはその中にあるものをすべて上書きし、オブザーバブルからテキストを設定するだけです。別の UI レイアウトを見ている場合は、それに応じて HTML を変更してください。ただし、上記の点に留意してください。

また、コンテナレス バインディングと with バインディングの使用については、KO のドキュメントを参照してください。これらは、より良い HTML レイアウトを作成するのに役立ちます。

このフィドルを確認してください：http://jsfiddle.net/7BNQy/

変更された HTML :

<table class="table">
<thead>
</thead>
<tbody data-bind="foreach: categories">
    <tr>
        <td data-bind="text: Name">

        </td>
        <td>
            <table>
                <tbody data-bind="foreach: categoryVariables">
                    <tr>
                        <td data-bind="text: Name"></td>
                    </tr>
                </tbody>
        </table></td>
        <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
    </tr>
</tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>
于 2012-12-18T10:17:30.733 に答える