knockout 3.5.x 新特性ko.when在ycloud里的应用

@songhlc 2018-01-25 13:04:35发表于 yonyouyc/blog

knockout 3.5.0里含有ko.when方法,具体使用场景是那些仅需要运行一次的方法

使用示例:

ko.when(/*计算属性表达式*/() => {
    return this.visible()
  }, /*回调函数*/() => {
    this.isShow(true)
  }, /*回调函数里的上下文*/this)

ycloud里模态框初始化渲染的场景非常适合使用ko.when。所以将新方法进行了引入:

import ko from 'knockout'
// 先判断当前是否存在ko.when,如果不存在则进行定义(实际代码摘自knockoutjs 3.5.0-beta 版本)
if (!ko.when) {
  ko.when = function (predicate, callback, context) {
    var observable = ko.pureComputed(predicate).extend({notify: 'always'})
    var subscription = observable.subscribe(function (value) {
      if (value) {
        subscription.dispose()
        callback.call(context)
      }
    })
    // In case the initial value is true, process it right away
    observable['notifySubscribers'](observable.peek())
    return subscription
  }
}

模态框默认情况下是不展开的,内部可能包含数据请求等复杂处理,如果一开始就渲染则会增加额外开销,故默认if:false 不渲染

修改modal外层

// 添加if:isShow
<div data-bind="transferdom,visible:visible, if:isShow">
    ...
</div>

js里进行ko.when的使用

ko.when(() => {
    return this.visible()
  }, () => {
    this.isShow(true)
  }, this)

由于模态框的隐藏显示是根据visible来判断的,所以当第一次visible为true的时候,我在回调函数里将isShow属性设置为true,触发内层渲染。这样就是实现了模态框内层内容只在用户点击打开模态框的时候才进行渲染。