1

私は knockoutjs を使用しており、次のようなオブジェクトがあります。

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
};

home.prototype.create = function(){
   alert('creating');
};

home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

return home;

次に、HTML でwithバインディングを使用します。

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson />
</div>
  • これは私の正確なコードではなく、簡略化されたバージョンです

この状況でユーザーがボタンをクリックするthisと、私のメタデータ オブジェクトになります。メタデータには create メソッドがないため、未定義のエラーが発生します。

バインディングを使用せずwith、代わりに次のようにバインドする場合: <input data-bind='value: vm.metdatadata().startDate'/>

次に、ユーザーがクリックすると、オブジェクト全体が取得され、呼び出すことができますthis.create();

  1. これは予想される動作ですか？
  2. そうである場合、with バインディングを使用しながら addNewPerson メソッドでメイン モジュールにアクセスするにはどうすればよいですか?
4

1 に答える 1

1

これはclickバインディングの予想される動作ですthis。現在の「アイテム」が設定されるため、この場合はmetadataオブジェクトになります。

これを解決するには複数の方法があります。

ビュー内の親オブジェクトの値を修正するには、bind関数(ブラウザが適切にサポートしていない場合、Knockout には独自のバージョンが付属しています) を使用できます。this

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson.bind($parent) />
</div>

または、ビューモデル レベルで同じことを行うこともできます (プロトタイプを使用しているため、構文が少し変に見えます)。

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
    this.addNewPerson = this.addNewPerson.bind(this);
};


home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

または、記事「 Revisting Event Delegation in Knockout.js」で説明されているイベント委任パターンを使用できます。

また、Ryan Niemeyer の素敵なビデオ: devLink 2013 - Knockout.js のヒントとコツもご覧ください。2番目のヒントは「これ」の制御に関するものです。</p>

于 2013-09-30T15:16:14.960 に答える