I`m trying to create a widget for dashing (http://shopify.github.io/dashing/) for displaying 4 values:
value1
value2
value3
value4
I have copied the contents of the text widget and added the following to the widget.html
<h3 data-bind="text | raw"></h3>
<p class="more-info" data-bind="moreinfo | raw"></p>
<p class="value1" data-bind="value1"></p>
<p class="value2" data-bind="value2"></p>
<p class="value3" data-bind="value3"></p>
<p class="value4" data-bind="value4"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
When I add this widget to my dashboard using:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello"></div>
</li>
Yet I have a blank page in my dashboard.
What would be the correct way to create a widget that will only receive pushed data?
Thanks in advance.
Actually use "list" widget for this. Look at the 'buzzwords.rb' file for an idea.
Do you have a coffeeScript file that defines your widget class and extends Dashing.Widget? You don't need anything else in there to start, but that is where your widget is defined.
Also, do you have a job pushing data to this widget id "mywidget"? If not, look in the jobs folder, same level as widgets folder to get an idea, basically a Rufus scheduler task to pump data to your widgets. ..and don't forget to check the css for your widget..
From the current information, in the dashboard, it shall using like
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello" data-value1="first value" data-value2="this is value2" data-value3="value3" data-value4="last value" ></div>
</li>
The data-bind="value1" shall be mapped into dashboard like data-value1
It may have other problems, like putting those widget in separate folder, your css format. Please provide more detail file list for reference if it can't solve it.
Related
I am trying to do drag and drop without deleting the item from the dragged list. I followed an example Working demo and tried to reproduce the same. Unfortunately it was not working and I found that the cdkDropListDropped event is emitted. You can find the issue in this link Problematic demo
I want to achieve like the Working demo
Please show me where I am wrong.
I found I had to move the directives cdkDropList and cdkDropListConnectedTo="drop-list" from the div with ID div1 to the parent div so the HTML becomes:
<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
<div id="div1" cdkDrag *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
{{type.text}}
<div *cdkDragPlaceholder class="field-placeholder"></div>
</div>
</div>
At this point the cdkDropListDropped event fired and called the itemDropped function. The problem then was, there was a runtime error on the following line:
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
After copying the itemDropped method from your working demo StackBlitz, it then started work. Please see this StackBlitz for a demo.
I have the following html part of code:
<li repeat.for="route of router.navigation" style="border: 0px;" if.bind="showNav(route)">
<a href.bind="route.href" if.bind="!route.settings.nav">
${route.title}
</a>
<a href="javascript:;" if.bind="route.settings.nav">
${route.title}
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of route.settings.nav" class="ul-menu">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
In Opera, Chrome this code works fine, but in IE & Edge doesn't work - I don't see this HTML-part.
Problem is in the following statement (in the first line):
if.bind="showNav(route)"
If I deleted it, I can see my navigation menu in Edge & IE also.
Code for showNav:
showNav(row) {
if (!row.config.role) {
return true;
}
this.currentUserName = localStorage.getItem("token_user");
var currentUser = localStorage.getItem("token_role");
var role = row.config.role.includes(currentUser);
return role;
}
If I add in showNav
console.log(row);
It logs undefined in Edge & IE, but in Opera & Chrome I see the full necessary value.
I work with Aurelia framework, so route.navigation goes from ts-file and has the necessary value.
What could be the problem?
The github issue from #jesse-de-bruijne is different, that if.bind and repeat.for are not on the same DOM element. Furthermore, that issue was FIXED long time ago. But anyway, the show.bind purposed by Jesse works.
The real issue is that you are using if.bind and repeat.for on exact same DOM element, which is not supported by Aurelia due to uneven behavior from browsers. Aurelia documentation has not yet addressed this.
Besides the show.bind fix, you can also use template element (which will result to no extra DOM wrapper actually) to seperate repeat.for and if.bind.
<template> <!-- the top level template in your html file -->
...
<template repeat.for="route of router.navigation">
<li style="border: 0px;" if.bind="showNav(route)">
...
</li>
</template>
...
</template>
FYI: Repeat, with and if are called template controllers. They bind before other bindings. You cannot use multiple template controller attributes on the same dom element (because of different behavior among browsers).
The above comment is from Aurelia core member jdanyow on one of my issues.
https://github.com/aurelia/templating-resources/issues/252
Indeed, different browsers sort the HTML attributes differently. That's why your code works on some browsers but not all.
Try using a show.bind instead, if.bind has had some trouble with a repeater on the same line.
For example: https://github.com/aurelia/templating-resources/issues/84
If you do need to use an if.bind, for performance reasons for example, try putting a div child in the repeater containing said if.bind.
I am trying to move my website to Hack and XHP, of course. Below is a structure of what code structure I want to achieve:
<ui:backstageHeader>
<ui:backstageHeader-navItem href="/">stories</ui:backstageHeader-navItem>
<ui:backstageHeader-navItem href="/story/send">send a story</ui:backstageHeader-navItem>
<ui:backstageHeader-navItem href="/aboutus">support</ui:backstageHeader-navItem>
</ui:backstageHeader>
(Note: :ui:backstageHeader-navItem basically renders to <a href={$this->:href}>{$this->getCHildren}</a> so there is not need to attach its class here.)
Below is the code for :ui:backstageHeader:
final class :ui:backstageHeader extends :ui:base {
attribute :div;
children (:ui:backstageHeader-navItem)*;
protected function compose() {
$dom =
<section class="backstage-header">
<div class="container">
<div class="cell-logo">
<a href="/">
<span class="no23-logo-white"></span>
</a>
</div>
<div class="cell-navigation">
</div>
<div class="cell-account">
<div class="cell-login">
<div id="siteNav-login">Autentificare</div>
</div>
</div>
</div>
</section>;
$mainContainer = $dom->getChildren("div")[0];
$cellNavigation = $mainContainer->getChildren("div")[1];
$navItems = <ul class="main-navigation"></ul>;
foreach($this->getChildren() as $child) {
$navItems->appendChild(<li>{$child}</li>);
}
$dom->appendChild($navItems);
return $dom;
}
}
I used the Terminal to debug my code using hhvm -m d <file.php>, and everything was alright there; however, when I get to my browser, I get 500 error header. This is what the log says:
Catchable fatal error: Hack type error: Could not find method getChildren in an object of type XHPChild at /var/www/res/ui/backstage-header.php line 25
The error comes from
$cellNavigation = $mainContainer->getChildren("div")[1];
But, somehow, I need to append ul.main-navigation to div.cell-navigation from my section.backstage-header.
How can I do it?
Don't structure your code this way. Built it up from the inside out, so that you don't have to do a ton of unreadable getChildren calls looking for specific children. Those calls are super hard to read, and super inflexible when you change the structure of your XHP. You wouldn't do something like node.firstChild.lastChild.lastChild.firstChild in the JS DOM, would you? No, there's a better way in JS, to find things by class or ID; in XHP, you can just build it up the right way in the first place!
I'd give you an example of this, but it doesn't look like you actually use $mainContainer or $cellNavigation, so you can just remove those two problematic definitions.
As an aside, you really shouldn't be getting your type errors as catchable fatals from HHVM; this is a last resort sort of check. Try running the hh_client checker directly, maybe even showing its result in your IDE; it will give you a much faster iteration cycle, and much more information than HHVM provides.
From my experience, appendChild is very prone to human error. It's easier to do something like:
$items = (new Vector($this->getChildren()))->map($child ==> <li>{$child}</li>);
return <div id="container">{$items}</div>;
If you want to wrap the children in <li />.
Not sure if that will work but it will be close.
Pro tip: You can assign variables from within an XHP tree.
$root =
<div>
{$child = <span>
Text children
</span>}
</div>;
Now $child is already set to the <span> element.
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com