javascript - Django-dashing 创建你自己的小部件

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(),
      }

static/widgets/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);
}

static/widgets/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>

static/widgets/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;
};

static/dashing-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')

我的问题如下: 我怎样才能让我的小部件更新？ (小部件本身出现，但仅使用默认设置)

如果我点击网址: Dashboard/widgets/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