Question

我一直在尝试为我的仪表板创建一个自定义小部件，该小部件使用django-dashing框架运行

https://github.com/talpor/django-dashing

http://django-dashing.readthedocs.org/en/latest/

我的CustomWidget定义如下：

CustomWidget.py：

from dashing.widgets import Widget

class CustomWidget(Widget):
  title = ''
  more_info = ''
  updated_at = ''
  detail = ''
  value = ''

  def get_title(self):
      return self.title

  def get_more_info(self):
      return self.more_info

  def get_updated_at(self):
      return self.updated_at

  def get_detail(self):
      return self.detail

  def get_value(self):
      return "$67"
      #return self.value

  def get_context(self):
      return {
          'title': self.get_title(),
          'more_info': self.get_more_info(),
          'updated_at': self.get_updated_at(),
          'detail': self.get_detail(),
          'value': self.get_value(),
      }

静态/部件/ custom_widget / custom_widget.css：

.widget-custom_widget {
    background-color: #96bf48;
}

.widget-custom_widget h1 { 
    color: rgba(255, 255, 255, 0.7);
}

.widget-custom_widget h2 {
    color: #fff;
}

.widget-custom_widget .detail {
    font-weight: 500;
    font-size: 30px;
    color: #fff;
}

.widget-custom_widget .more-info {
    color: rgba(255, 255, 255, 0.7);
}

.widget-custom_widget .updated-at {
    color: rgba(0, 0, 0, 0.3);
}

静态/部件/ custom_widget / custom_widget.html：

<div>
    <h1>{ data.title }</h1>
    <h2>{ data.value }</h2>
    <p class="detail">{ data.detail }</p>
    <p class="more-info">{ data.more_info }</p>
    <p class="updated-at">{ data.updated_at }</p>
</div>

静态/部件/ custom_widget / custom_widget.js：

/* global $, rivets, Dashing, Dashboard */

Dashing.widgets.CustomWidget = function (dashboard) {
    var self = this,
        widget;
    this.__init__ = Dashing.utils.widgetInit(dashboard, 'custom_widget');
    this.row = 1;
    this.col = 1;
    this.color = '#96bf48';
    this.data = {};
    this.getWidget = function () {
        return widget;
    };
    this.getData = function () {};
    this.interval = 1000;
};

静态/横飞-config.js：

var dashboard = new Dashboard();

dashboard.addWidget('custom_widget_that_does_stuff', 'CustomWidget', {
    getData: function () {
        $.extend(this.data, {
            title: 'Current Valuation',
            more_info: 'In billions',
            updated_at: 'Last updated at 14:10',
            detail: '64%',
            value: '$35'
        });

    }
});
dashboard.publish('custom_widget/getData')

我的问题如下：如何让我的小部件更新？（小部件本身出现，但仅使用默认设置）

如果我点击了网址：仪表板/小部件/ custom_widget - 我可以看到从我的CustomWidget类返回的自定义数据。

我在文档中读到，正确的方法是调用：

dashboard.publish（ 'custom_widget /的getData'）然而，这没有任何结果。

有没有人知道为什么这不起作用？或指向教程的链接？（除了上面链接的文件，我找不到任何其他内容）

谢谢！

Answer 1

所以我能够通过以下方式正确检索数据：

dashboard.addWidget('custom_widget', 'CustomWidget', {

    getData: function () {
        this.interval = 60000;

        $.extend(this.data, {
            title: "Something",
            more_info: "",
            updated_at: "",
            detail: "",
        });

        var pineapple = this;
        $.getJSON('widgets/custom_widget/render', function (data) {
            console.log(data.value);
            pineapple.data.value = data.value;
        });
    }
});

即dashboard.publish是一只红鲱鱼：P

Django-dashing创建自己的小部件

1 个答案: