如何在扩展器中访问视图模式

时间:2019-05-14 15:57:46

标签: javascript knockout.js requirejs

我想听一个叫做isDesktop的属性,当它改变触发显示/隐藏选项面板时。问题在于扩展器内部,我只能访问的部分是目标,选项,而这些都不能访问显示/隐藏方法所在的视图模型。

这在我切换到使用Require JS和组件之前是可行的,因为它使用全局范围来访问这些东西。最好不要使用全局范围,但是它确实限制了对必要属性的访问。我尝试绑定此对象,但这仅使我可以访问不提供访问权限的全局窗口对象。

  ko.extenders.responsive = function(target, option) {
    target.subscribe(function(isDesktop) {
      if (isDesktop) //showOptions()
      else //hideOptions()
    })
    return target
  }
//
  isDesktop: ko.observable(false).extend({ responsive: true }),

我想有一种方法可以从扩展器访问称为扩展器的范围。如果没有,那么可以尝试其他解决方案吗?

1 个答案:

答案 0 :(得分:0)

这个例子也许对您有帮助吗?我添加了viewmodel,但会辩论是否真的需要它?

console.clear();

ko.extenders.responsive = function(valueAccessor, options) {
  valueAccessor.subscribe(function(value) {
    if (value)
    	options.target(options.message);
    else
    	options.target('');
  })
};

ko.applyBindings(() => {
	var self = this;
  self.desktopOptions = ko.observable('');
  self.isDesktop = ko.observable(false).extend({ responsive: { vm: self, target: self.desktopOptions, message: 'desktop is set' }});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="checkbox" data-bind="checked: isDesktop" />
<span data-bind="text: desktopOptions"></span>