knockout.js afterRender是否可以与挖空组件一起使用?

mtb9vblg  于 2022-11-10  发布在  其他
关注(0)|答案(5)|浏览(193)

afterRender与模板绑定一起工作,但是在将我的模板转换为组件之后,似乎没有任何方法可以使用afterRender。我已经尝试寻找使用afterRender的组件的示例,但是什么也找不到。

ssgvzors

ssgvzors1#

我无法让这个方法像上面的帖子一样工作。但是我在git问题列表中找到了一个解决方法,它不需要自定义KO绑定。
在您的组件模板html或代码字符串中添加下面的行。

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

然后在您的模块/ viewModel中创建一个init函数:

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

或者根据您的viewModel结构:

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

        }
    };
},

就像一个护身符。它的工作例子在这里
http://jsfiddle.net/gLcfxkv6/1/
此处为knockout git上的线程:https://github.com/knockout/knockout/issues/1533
感谢git上的吸血鬼提供了变通方案。

afdcj2ne

afdcj2ne2#

这里的秘密是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'">
axr492tv

axr492tv3#

在不同组件之间切换后,我们需要访问组件中的DOM元素。我们希望在组件上使用不存在的“afterRender”绑定。
我们使用Javascript setTimeout解决了这个问题,让KO先进行渲染,然后将代码排队。
于飞:

<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);
2w2cym1i

2w2cym1i4#

从knockout 3.5.1开始,您可以在viewModel中添加一个koDescendantsComplete函数,该函数将在渲染完成后触发

var viewModel = {
    koDescendantsComplete: element => {
        console.log( 'Rendered!', element );
    }
}

请访问:https://github.com/knockout/knockout/blob/2db9f7f79939ed289621de72340ab048362ed76b/src/components/componentBinding.js#L73

vmjh9lq9

vmjh9lq95#

做一个新的装订,像这样

ko.bindingHandlers.initBinding = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    debugger
    if (valueAccessor() && valueAccessor().afterRender && bindingContext.$data) {
        valueAccessor().afterRender(bindingContext.$data);
    }
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    }
};

export default ko.bindingHandlers.initBinding

如果你不使用ES6(巴别塔等),你不需要导出。
然后,在组件html中,可以执行以下操作

<div class="staff-directory" data-bind="initBinding: {afterRender: afterRender }">
    <p>Loaded</p>
</div>

在组件模型中

class staffDirectory {

    constructor() {
        console.log('staff directory loaded');
    }

    afterRender() {
        console.log('afterRender called');
    }

}

export default staffDirectory;

相关问题