Hello World Knockout 点击绑定到 Typescript 示例

Question

这里的总新手问题，试图指向正确的方向。

在 HTML 模板中，我有一个 DOM 元素：

<a href=# data-bind="click: $parent.test">«</a>

在 Typescript 文件中，我有：

public test() {
    alert("hello");
}

为了让警报功能通过点击被调用，我应该注意什么？

详细说明并添加更多上下文：

我的 ViewModel 如下所示：

 import * as ko from 'knockout';
 import styles from './QuestCustomBlog.module.scss';
 import { IBlogPost, IBlogListings } from './IBlogListings';

 export interface IQuestCustomBlogPostBindingContext extends IBlogListings {
    shouter: KnockoutSubscribable<{}>;
 }

export interface IBlogListings {
    BlogPosts: IBlogPost[];
    Previous: string; //for paging backwards
    Next: string; // for paging forwards
}

export default class BlogListingsViewModel {

public BlogListings: KnockoutObservable<IBlogPost[]> = ko.observable(null);
public Next: KnockoutObservable<string> = ko.observable(null);    
public Previous: KnockoutObservable<string> = ko.observable(null);


constructor(bindings: IQuestCustomBlogPostBindingContext) {
    this.BlogListings(bindings.BlogPosts);
    this.Next(bindings.Next);
    this.Previous(bindings.Previous);

    bindings.shouter.subscribe((value: IBlogPost[]) => {
        this.BlogListings(value);
    }, this, 'BlogListings');

    bindings.shouter.subscribe((value: string) => {
        this.Next(value);
    }, this, 'Next');

    bindings.shouter.subscribe((value: string) => {
        this.Previous(value);
    }, this, 'Previous');


}

public test() {
    alert('test');
}
}

我的 ko.applybindings 看起来像这样：

export default class QuestCustomBlogWebPart extends 
BaseClientSideWebPart<IQuestCustomBlogWebPartProps> {
  private _id: number;
  private _componentElement1: HTMLElement;
  private _koBlogSiteURL: KnockoutObservable<string> = ko.observable('');
  private _koBlogListings: KnockoutObservable<IBlogPost[]> = 
ko.observable(null);

  /**
   * Shouter is used to communicate between web part and view model.
   */
  private _shouter: KnockoutSubscribable<{}> = new ko.subscribable();

  /**
   * Initialize the web part.
   */
  protected onInit(): Promise<void> {
    this._id = _instance++;

    const tagName1: string = `BlogListingsComponent-${this._id}`;
    this._componentElement1 = this._createComponentElement(tagName1);
    ko.components.register(
        tagName1,
        {
            viewModel: BlogListingsViewModel,
            template: require('./BlogListingsTemplate.html'),
            synchronous: false
        }
    );

    this._getPagedBlogListings()
    .then((response) => {

      const bindings1: IQuestCustomBlogPostBindingContext = {
          BlogPosts: response.BlogPosts,
          shouter: this._shouter,
          Next: response.Next,
          Previous: response.Previous
      }
      ko.applyBindings(bindings1, this._componentElement1);

    })

    return super.onInit();
  }

您看到的所有绑定都有效，但我似乎无法弄清楚如何将 test() 函数绑定到点击事件...

Answer 1

这是一件很奇怪的事情，但你不能轻易地将淘汰赛事件绑定到原型函数（而 public Test() 就是这个函数）。

尝试将 test() 改为：

public test = ()=> {
    alert('test');
}

编辑：我认为在这种情况下你不需要 $parent