0

コードとアプローチを示す前に、目前の問題が何であるかを説明させてください。誰かがより良い解決策を持っているかもしれません。問題は、特定の基準でグループ化された配列のリストがあるということです。基準ごとにリスト/セクションをレンダリングする必要があります。各セクションには、HTMLとしてもレンダリングする必要のあるオブジェクトのリストが含まれています。

KnockoutJSは初めてです-昨日使い始めました。しかし、目前の問題を考慮して、私はドキュメントで観察可能な辞書または同様のものを検索しました。幸い、ko.observableDictionaryプラグインを見つけました。だから私はこれでうまくいくはずだと思い、次のコードを書きました（概念実証）：

<div id="tiles-holder" data-bind="template: { name: 'tile-list', foreach: dictionary }">

</div>

<script type="text/html" id="tile-list">
<div class="md-auto-max-width">
    <div class="md-list-tiles md-auto-arrange-tiles" data-bind="template: { name: 'tile-default', foreach: items }"></div>
</div>
</script>

<script type="text/html" id="tile-default">
    <div class="metro-tile-square  md-list-item md-list-tile-large">
        <div class="md-list-item-image" data-bind="css: { defaultimage: $data.title() != 'architect' }"></div>

        <div>
            <span data-bind="text: name"></span> - <span data-bind="text: $data.department"></span>
        </div>

    </div>
</script>

<script type="text/javascript" src="@Url.Content("~/Scripts/metro/ko.observableDictionary.js")"></script>
<script type="text/javascript">

    $(function () {
        var viewModel = function TileViewModel() {
            var self = this;

            self.dictionary = new ko.observableDictionary();

            for (var i = 0; i < 15; i++) {
                self.dictionary.push("Developers", new employee('developer' + i, 'developer', 'projectDevelopment'));
                self.dictionary.push("Analysts", new employee('analyst' + i, 'analyst', 'business intelligence'));
            }
            self.dictionary.push("Architects",new employee('Some Architect', 'architect', 'Architecture and development'));



            function employee(name, title, department) {
                this.name = ko.observable(name);
                this.title = ko.observable(title);
                this.department = ko.observable(department);
            }
        };

        ko.applyBindings(new viewModel(), $('#tiles-holder').get(0));
    });
</script>

しかし、私は次のエラーを受け取り続けます：

エラー：バインディングを解析できません。メッセージ：TypeError：$data.titleは関数ではありません。バインディング値：css：{defaultimage：$ data.title（）！='architect'}

問題は$data、テンプレートのデータコンテキストを参照していないことだと思います。しかし、どうすればこれを解決できますか？

4

1 に答える 1

1

そもそも辞書を使用する理由、辞書として使用していないので、代わりにobservableArrayを使用してください

とにかく、あなたは各アイテムの価値の小道具にアクセスする必要があります

http://jsfiddle.net/X2xZM/

于 2012-08-14T19:48:55.687 に答える