Question

这里总有一个问题，试图指出正确的方向。

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

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

在一个打字稿文件中，我有：

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（）函数绑定到click事件......

Answer 1

这是一个奇怪的事情，但你不能轻易地将knockout事件绑定到原型函数（并且公共Test（）就是这个函数）。

尝试将test（）更改为：

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

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

Hello World Knockout单击绑定到Typescript示例

1 个答案: