TypeScript List Item Event Bind to ViewModel's Function(TypeScript 列表子项点击事件绑定ViewModel的函数)

之前建了个TypeScript MVVM的App，希望在点击列表中的子项的链接可以触发显示该子项的详细信息，于是在html页添加了如下代码，

            <div class="panel-body">
                <ul class="list-unstyled" data-bind="foreach: books">
                    <li>
                        <strong><span data-bind="text: AuthorName" class="span-body"></span></strong>:
                        <small>
                            <a href="#" class="span-body"
                               data-bind="text: Title, click: $parent.getBookDetail"></a>
                        </small>
                    </li>
                </ul>
            </div>

在其对应的ViewModel中也添加相应的方法，并在this.bookService.处打上断点。

        /**
         * Get book details.
         *
         * @param item A book object detail.
         */
        public getBookDetail(item: WebApiClient.Models.Datas.Book): void {
            this.bookService.getItem(item.Id).done((data) => {
                this.detail(data);
            });
        }

运行后效果如下图

点击Books栏的链接，例如Book A，到达断点处

可以看到此时的this并不是我们期望的viewModel对象而是该Book对象，继续运行，程序奔溃并退出。因为在JavaScript中，this指向函数执行时的当前对象，作为JavaScript超集的TypeScript亦是如此，所以我们需要修改列表子项的事件绑定，使this能够正确的指向viewModel.

这里我们需要把click: $parent.getBookDetail改为event: { click: $root.getBookDetail.bind($root) }，问题就迎刃而解了。

            <div class="panel-body">
                <ul class="list-unstyled" data-bind="foreach: books">
                    <li>
                        <strong><span data-bind="text: AuthorName" class="span-body"></span></strong>:
                        <small>
                            <a href="#" class="span-body"
                               data-bind="text: Title, event: { click: $root.getBookDetail.bind($root) }"></a>
                        </small>
                    </li>
                </ul>
            </div>

最后运行再次点击book A，到达断点处，

这个时候this指向了当前的viewModel，继续运行，程序也OK了。

相关资源和代码下载：http://download.csdn.net/detail/leyyang/8016567