afterRender是否可以使用Knockout组件？

Question

afterRender使用模板绑定,但在将模板转换为组件后,似乎没有任何使用方法afterRender.我试过寻找一个使用afterRender但无法找到任何东西的组件的例子.

Answer 1

根据上面的帖子,我无法使用该方法.但是我在git问题列表上找到了一个解决方法,它不需要自定义KO绑定.

在组件模板html或代码字符串中添加以下行.

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

然后在您的module/viewModel中创建一个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 for thearound.

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'">

Answer 3

在不同组件之间切换后,我们需要访问组件中的DOM元素.我们本来希望在组件上使用不存在的"afterRender"绑定.

我们用Javascript setTimeout解决了它,让KO首先进行渲染,然后实际排队我们的代码.

HTML:

<div data-bind="component: compName"></div>

切换组件的代码:

var compName = ko.observable();

//...

compName(switchToComponent);
setTimeout(function(){
    // this code is queued until after the component is rendered.
}, 0);