Jquery KnockoutJS中的嵌套模板绑定

在我展示我的代码和方法之前，让我解释一下手头的问题是什么，也许有人有更好的解决方案。问题是我有一个数组列表，这些数组按照特定的标准分组。我需要根据标准呈现一个列表/部分，每个部分都包含一个对象列表，这些对象也应该呈现为HTML

我是KnockoutJS的新手-我昨天开始使用它。但考虑到手头的问题，我在文档中搜索了一本可观察的字典或任何类似的东西。幸运的是，我找到了答案。因此，我认为这应该起作用，并编写了以下代码（只是一些概念证明）：

- 
$（函数（）{
var viewModel=函数TileViewModel（）{
var self=这个；
self.dictionary=new ko.observedictionary（）；
对于（变量i=0；i<15；i++）{
self.dictionary.push（“开发者”、新员工（“开发者”+i、“开发者”、“项目开发”）；
self.dictionary.push（“分析师”，新员工（“分析师“+i”，“分析师”，“商业智能”））；
}
self.dictionary.push（“架构师”、新员工（“一些架构师”、“架构师”、“架构和开发”）；
职能员工（姓名、职务、部门）{
this.name=ko.observable（name）；
this.title=ko.可观察（title）；
本部门=可观察的高（部门）；
}
};
ko.applyBindings（newviewmodel（），$（“#tiles holder”）.get（0））；
});

但我一直得到以下错误：

错误：无法分析绑定。消息：TypeError:$data.title为 不是一种功能；绑定值：css:{defaultimage:$data.title（）= “架构师”}

---

我认为问题在于

$data

没有引用模板的数据上下文。但是我该如何解决这个问题呢？

首先为什么要使用字典，因为你并不是把它当作字典来使用，所以要使用一个可观察的工具

无论如何，您需要访问每个项目的值属性

<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>