Since Goolge Chart API is not available inside China. I want to replace it with Baidu's ECharts.
Should I define another ChartView, and is there any official document on How To?
Right now, I am using Jinja2 template to include echarts.js (lib) and custom js code (action) as well as custom method in view (data source) at the end of the html file. But I hope there is official way to do that.
As a dirty and quick solution, I use another template with custom js code for Baidu's ECharts.
In next plan, I will override FAB design.
Related
This question is more on best practise for including some more details in existing component where outlet ref is not available.
For ex. In checkout, during review-order step, I need to add some custom details with delivery-mode and i want to use the complete component as is.
Do i need to
copy all the html & component logic from spartacus code
create my custom component and use all copied code
add the little detail with my delivery mode section
replace the existing component by my custom component using COMPONENT as outlet-ref
There is lot of duplicate code to implement this.
Is there a better way like just inherit all the component detail by importing the component in my module and override the specific section (i am not sure but i was thinking that would be helpful. ).
Here is what I would do:
create new component
copy all the html from spartacus to this component
extend the original component instead of copying all the logic
replace component in configuration
We're working on better way to extend templates, but that's not gonna be available soon. In the approach I recommended when updating spartacus you would only need to validate if the template changed, as the component logic will be automatically updated when you extend it.
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.
The code to embed the widget is nice and simple, but it includes javascript in tags.
Durandal appears to strip out such script tags.
How do I use the embed code in a Durandal view?
https://dev.twitter.com/web/embedded-timelines
<a class="twitter-timeline" href="https://twitter.com/XXX" data-widget-id="XXX">Tweets by #XXX</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
You would need to write a custom Knockout binding, or create a Durandal widget where the view is your tag, and the viewModel handles the JavaScript in your tag.
Some notes: In your widget's view model, you would avoid d.getElementsByTagName(s) in favor of simply referencing the view reference passed in to either the attached or compositionComplete handler that Durandal provides. In fact, you could pretty much eschew all direct DOM manipulation in favor of Durandal's imported view references and Knockout's/Durandal's templating/composition.
UPDATE
Take a look at this from the documentation you reference: "If you’re already including our ‘widgets.js’ JavaScript in your page to show embedded Tweets or Twitter buttons, you don’t need to include this script again; it updates automatically to support new features."
This could lead you down the path of simply referencing widgets.js in a script tag in your index.html or index.chtml file.
You cannot use script tags in Durandal views, but you can use them in your index page.
SECOND UPDATE
Once widget.js has been referenced in a script tag in the index.html or index.chtml (or perhaps even by using AMD), it becomes a matter of choosing the proper Durandal point at which to load the Twitter widget. This could be either in the attached handler or in the compositionComplete handler, as indicated above.
As the OP pointed out in his comments, a functional place to do this is compositionComplete, in the following manner:
var compositionComplete = function () {
twttr.widgets.load();
}
as documented here.
This assumes that twttr is either on the window or injected into the viewModel.
POSSIBLE MEMORY LEAK
It is equally important to note that unloading of widgets must take place in the Durandal's detached handler. Use Twitter's API to unload, and then be sure to nullify the windows reference.
I am busy teaching myself FXML.
I'm doing this by following this example.
It's a simple text editor.
However, in the tutorial everything is Java code.
I myself am using FXML to seperate the view of the logic.
I currently face the following challenge:
I have defined an TextArea in my FXML like so:
<TextArea id="taTextArea" fx:id="taContent" wrapText="true" />
Usually you add action listeners using onAction="#actionName"
What I want to know is, how can I do something similar for text changes. So I can detect wether a save is needed, modify the status bar label etc.
I want to avoid having to attach the TextArea to a change listener in the init method of the controller(implementing Initializable).
Also.. when I complete this application, I will write a blog about it.
With the lacking FXML documentation, I think itll be helpfull to other newbies.
So I want my code to be as clean as possible.
EDIT 1
No progress yet. I need to know if theres a thing such as code completion in FXML
So I can check what kind of properties I can use in FXMl. There should be a textLength property. In the provided link the author uses lengthProperty.addListener. I need an FXML equivilant
You could use the onKeyPressed property:
onKeyPressed="#textChanged"
which calls the textChanged method in the specified controller.
For the second question: The best reference for FXML currently is the javadoc of JavaFX, since all properties are listed there.
I'm developing a custom Dojo widget which in fact acts as a wrapper for Timeline JS library (http://www.simile-widgets.org/timeline/).
Is there a possibility to include the required JS code for Timeline in the custom dojo widget or must I include manually in my "index.html"??
Thanks in advance.
Do you have control over the Timeline source code, that is, are you hosting it yourself?
If this is the case you could turn the dependency into a dojo module by inserting an appropriate dojo.provide call on the top or you could just straight up copy-and-paste everything inside your MyWidget.js source file.
If this is all ends up too compicated for you to consider it worth it, adding the script tag by hand on the index.html is not that bad (given how base Javascript actually doesn't have a real module system you could use instead)