jquery - 将 jquery 自定义小部件与主干.js 视图一起使用

Question

我有一个自定义 jQuery 小部件，该小部件从我的应用程序中调用，该应用程序使用 MVC 的主干.js。如何在我的自定义 jQuery 小部件中使用主干事件模式？

function( $ ) {
  $.widget( "medex.chooser", {
  ...
  _create: function() {
      // Would I create a new backbone view here???
  }
}

谢谢。

Answer 1

我认为您需要定义一个自定义视图，然后由您的自定义小部件调用。

在您的应用初始化代码中，例如：

APP = {};          // your app's global object
APP.Views = {};

APP.Views.WidgetView = Backbone.View.extend(
{
    events: {
        "click .grid1" : "onGrid1Click"
    },

    initialize: function() {
        // code here
    },

    onGrid1Click : function(evt) {
        // code here
    }
});

然后这将是您的小部件的构造函数代码：

function Widget(element) {
   this.view = new APP.Views.WidgetView({ el: element });
}

此代码可能并不完全有效，但应该让您了解您正在寻找的结构。让我知道这是否适合你。

Answer 2

如果您仍在寻找答案，您可以将小部件转换为视图。从 Widget 转换为 View 的基本规则如下：

• _create 变为初始化
• this.element 变成 this.$el
• 刷新变成渲染
• 破坏变成移除
• $('.someDiv').myWidget() 变为 new MyView({ el: $('.someDiv') });
• 选项必须成为构造函数参数，但可以通过几种不同的方式处理