2015-02-05 6 views
1

Ive пытался создать собственный виджет для моей приборной панели, которая проходит с использованием рамок Джанго-лихойDjango-лихой создавать свои собственные виджеты

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') 

Мой вопрос: Как я могу обновить свой виджет? (появляется сам виджет, но только с настройками по умолчанию)

если я ударил URL: Dashboard/виджеты/custom_widget - Я могу увидеть пользовательские данные, что им возвращающихся из моего класса CustomWidget.

Я прочитал в документации, что правильный способ сделать это назвать:

dashboard.publish («custom_widget/GetData») Однако это ничего не дает.

У кого-нибудь есть идеи, почему это не работает? или ссылку на учебник? (Я не смог найти ничего, кроме документа, связанного выше)

Спасибо!

ответ

5

Так я смог правильно извлечь данные с помощью следующего:

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

Смежные вопросы