使用Knockout更改自定义jquery插件的设置

Change settings of custom jquery plugin using Knockout

本文关键字：插件 设置 jquery 自定义 Knockout 使用      更新时间：2023-09-26

我创建了一个非常基本的jquery插件。现在，我想使用knockoutjs来动态更新该插件的设置。我似乎不知道该怎么做，甚至不知道从哪里开始。这是我目前得到的。

<div class="mychart"></div>
  <input type="text" data-bind="value: chartwidth"/>
  <input type="text" data-bind="value: chartheight"/>
    <script src="jquery.js"></script>
  <script src="knockout.js"></script>
  <script src="chartjs.js"></script>
  <script>
    $(".mychart").nbchart({
      width:'200px',
      height:'200px'
    });
    // Here's my data model
    var ViewModel = function(cwidth,cheight) {
        this.chartwidth = ko.observable(cwidth);
        this.chartheight= ko.observable(cheight);
    };
    ko.applyBindings(new ViewModel("100px","100px"));

您可以做的最简单的事情就是订阅变量:

this.chartwidth.subscribe(function (newValue) {
  $(".mychart").nbchart({width:newValue});
});

但是，您违反了Knockout的基本规则，即"不要在绑定处理程序之外混淆DOM"。

你的插件的自定义绑定处理程序应该是这样的:

ko.bindingHandlers.nbchart = {
  init: function (element, valueAccessor) {
    $(element).nbchart();
  },
  update: function (element, valueAccessor) {
    var config = ko.unwrapObservable(valueAccessor());
    $(element).nbchart({
      width: config.width(),
      height: config.height()
    });
  }
};

你会绑定像

这样的东西
<div data-bind="nbchart:config"></div>

，你的视图模型有一个配置变量，如

var ViewModel = function(cwidth,cheight) {
    this.chartwidth = ko.observable(cwidth);
    this.chartheight= ko.observable(cheight);
    config: {
      width: this.chartwidth,
      height: this.chartheight
    }
};

最后，如果你不打算在没有Knockout的情况下使用这个插件，你不需要jQuery插件。您可以将所有的代码写入自定义绑定处理程序。

相关文章：