knockout.js - afterRender は Knockout コンポーネントで動作しますか?

Question

afterRenderはテンプレート バインディングで動作しますが、テンプレートをコンポーネントに変換した後は、afterRender. を使用するコンポーネントの例を探してみましたが、afterRender何も見つかりません。

Answer 1

上記の投稿に従ってメソッドを機能させることができませんでした。ただし、gitの問題リストで回避策を見つけましたが、カスタムKOバインディングは必要ありません。

コンポーネント テンプレートの html またはコードの文字列に次の行を追加します。

 <span data-bind="template: { afterRender: init }"></span>

次に、モジュール / ビューモデルに init 関数を作成します。

 this.init = function() {
   Do cool DOM stuff here.
}

またはあなたのviewModel構造に応じて：

viewModel: function(params) {
    return {
        init: function () {

        }
    };
},

魅力のように機能します。動作例はこちら

http://jsfiddle.net/gLcfxkv6/1/

ノックアウト git に関するスレッド: https://github.com/knockout/knockout/issues/1533

回避策を提供してくれた git の vamps に感謝します。

Answer 2

ここでの秘密はhttp://knockoutjs.com/documentation/custom-bindings.htmlです

ko.bindingHandlers.myCustomBinding = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
    if (bindingContext.$data.init) bindingContext.$data.init(element, valueAccessor, allBindings, viewModel, bindingContext);
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
    if (bindingContext.$data.update) bindingContext.$data.update(element, valueAccessor, allBindings, viewModel, bindingContext);
  }
};

私のコンポーネントテンプレートでは、次のようなことをします

<div class="row-fluid" data-bind="myCustomBinding: 'someValue'">

コンポーネントviewModelでは、initおよび/またはupdateを実装するだけです。次に例を示します。

constructor.prototype.init = function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  // All the buttons in the buttons group need the same name,
  // but they all need distinct ids. We use timestamps because
  // as components, the names and ids should be distinct across
  // multiple instances of each component.
  var timeStamp = new Date().getTime();
  $('input:radio').attr('name', timeStamp).button();
  $('input:radio:eq(0)').attr('id', timeStamp+1);
  $('input:radio:eq(1)').attr('id', timeStamp+2);
  $('input:radio:eq(2)').attr('id', timeStamp+3);

  // Initialize the number-picker
  $('input[name="number-picker"]').TouchSpin();
};

Knockout のドキュメントは、この非常に便利なケースを指摘することで改善できます。また、これは非常に便利なバインディングです。たとえば、「init」と「update」の標準バインディングが必要です。

<div data-bind="init: 'someValue'">