2016-03-29 10 views
1

ノックアウトjsコンポーネントを使用してデータを表示する方法について、インターネット上で多くの例を見てきました。 params機能を使用すると、何かを簡単に表示することができます。しかし、どのようにしてコンポーネントからデータを取り出すのか分かりませんでした。ノックアウトjsコンポーネントからデータを取得する

コンポーネントで何かデータバインドする方法はありますか?

例:

フォーム入力を自動的にシリアル化するコンポーネントが必要な場合はどうすればよいですか?

ko.components.register('form-serializer', { 
    viewModel: function(params){ 
     this.value = ko.observable(); 
     this.name = params.name 

     this.serialize = function(){ 
      return this.name + '=' + this.value(); 
     } 
    }, 
    template: '<input data-bind="textInput: value"/>' 
} 

ビューモデルからシリアル化を呼び出す方法を教えてください。

+0

コンポーネントからデータを取得することで具体的な例を挙げてください。あなたは、 "外側"に属しているかもしれないparamsで観測可能なものを渡すことができます。 – Alex

+0

例を追加するための質問を更新しました – mattNit

+0

シリアル化はどこで終了しますか?あなたはまだどこかに返すのではなく、シリアライゼーションを書いているparamsでオブザーバブルを渡すことができます。 – Alex

答えて

1

オブジェクト(通常は観測可能ですが、必ずしもそうではない)をパラメータとしてコンポーネントに渡すと、コンポーネントと親の両方が読み書きできるようになります。したがって、それは一方向ではありません。あなたは単にデータを渡すだけではありません。あなたはリソースを共有しています。

2

ko.dataForを順番に使用すると、そのコンポーネントにバインドされているビューモデルを取得し、そのコンポーネントの関数または変数を呼び出すことができます。しかし、いくつかの特別な理由から、私はこれが私の構造に何かが間違っているというヒントを与えるので、これを使用するファンではありません。

私が好む別の方法は、コンポーネントのviewmodelを別の変数に入れて、アクセスできるようにすることです。

同様:

var formSerializer = function(params){ 
    this.value = ko.observable(); 
    this.name = params.name 

    this.serialize = function(){ 
     return this.name + '=' + this.value(); 
    } 
}; 

var serializer; 
ko.components.register("form-serializer", { 
    template: '<input data-bind="textInput: value"/>', 
    viewModel: { 
     createViewModel: function(params){ 
      serializer = new formSerializer(params); 
      return serializer; 
     } 
    } 
}); 

このように、あなただけのserializer.serialize()経由serialize関数を呼び出すことができます。

関連する問題