instanceTemplate in polymer 0.8.7 - dart

This question is a follow up question to this question. After upgrading to polymer 0.8.7 the following code stopped working:
DocumentFragment instanceTemplate(Element template) =>
template.createInstance(this,
new PolymerExpressions(globals: {
'splitnewline': (String input) => input.split("\n")
}));
Looks like Element doesn't contain a method createInstance anymore. How can I register a own polymer expression in polymer 0.8.7?
PS: I also used the method job() in the past, does anybody know where I can find it now?

With polymer 0.8.7 you have to import an additional package and call templateBind on the element.
import 'package:template_binding/template_binding.dart';
// ... fancy code in between ...
DocumentFragment instanceTemplate(Element template) =>
templateBind(template).createInstance(this,
new PolymerExpressions(globals: {
'splitnewline': (String input) => input.split("\n")
}));
Don't know about the job() method though.

Related

BackboneJS view keeps returning not defined

I can't seem to initialize my view. I tried looking around to see if this was asked before, but none of the solutions were working for me. My backbonejs view is below:
class FRView extends Backbone.View
el: $ 'fr_view'
initialize: ->
console.log("created")
render: ->
console.log("here")
I'm attemtpting to intialize it inside of a partial using the code below:
:javascript
var curr_view = new FRView()
but I keep getting the following error:
Uncaught ReferenceError: FRView is not defined
I've also tried
:javascript
var curr_view = new Backbone.View.FRView()
Which lead to the following error:
Uncaught TypeError: Backbone.View.FRView is not a constructor
From chrome sources browser I can see that the FRView file is loaded. I've also tried wrapping it in document onload but that didn't help. Any idea what might be causing this issue?
I see two bugs, one you know about and one that you'll find out about soon.
The first problem (the one you know about) is caused by CoffeeScript's scoping system:
Lexical Scoping and Variable Safety
[...]
Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function: (function(){ ... })();
So your FRView ends up looking more or less like this in JavaScript:
(function() {
var FRView = ...
})();
and that means that FRView is only visible inside your CoffeeScript file.
The easiest solution is to put the class in the global scope:
class #FRView extends Backbone.View
or equivalently:
class window.FRView extends Backbone.View
Another common solution is to define a global namespace for your app and then put your class in that namespace:
class YourNameSpace.FRView extends Backbone.View
and say new YourNameSpace.FRView when instantiating it.
The other problem is that your el looks a bit confused:
el: $ 'fr_view'
There are two problems here:
That will be looking for an <fr_view> element in your HTML and you probably don't have such a thing. I'd guess that you really have something like <div id="fr_view"> or maybe <div class="fr_view">, in that case you'd want to say:
el: '#fr_view' # If you're using an id attribute.
el: '.fr_view' # If you're using a CSS class.
$ 'fr_view' will be executed when the JavaScript is loaded and the element might not exist at that time. The solution to this problem is to use just the select for el as above. There's no need to use a jQuery object for el, Backbone will do that for you when the view is instantiated.
As 'mu is too short' pointed out, the issue rooted from namespace/declaration issues. After googling around about namespace I skimmed through this and fixed the issue by changing my backbonejs view to:
class Portal.Views.FRView extends Backbone.View
el: $ '#FRView'
initialize: ->
console.log("created")
render: ->
console.log("here")
and instantiated it using:
:javascript
var frview = new Portal.Views.FRView();

#Component viewBindings is deprecated, what to use instead?

I'm experimenting with Angular 2 and Dart. By the end of this step of the tutorial the class DisplayComponent has a Component annotation with viewBindings set:
#Component(selector: 'display', viewBindings: const [FriendsService])// this viewBinding
#View(...)
class DisplayComponent {
...
}
Atom with the angular2-dart plugin tells me that viewBindings is deprecated. This seems in-line with the documentation.
I've tried simply removing the variable from the annotation but I get an Exception saying No provider for FriendsService. What should I be doing instead?
for the sake of completeness
In Alpha 46 is viewProviders (viewBindings => viewProviders) and providers (bindings => providers) up to date.
https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html
https://github.com/angular/angular/blob/master/CHANGELOG.md

Silverstripe 3: removeByName not working

Good morning,
I've been trying to use the removeByName method and it doesn't work.
I'm basically trying to hide a field in my DataObject within the forms that's generated by ModelAdmin, which manages the object.
See sample code below:
///DataObject snippet...
class MyObject extends DataObject{
public static $db = array(
'Title' => 'Varchar',
'Desc' => 'Text',
'Template' => 'HTMLText',
);
//#Override
public function getCMSField(){
$fields = parent::getCMSField();
$fields->removeByName('Template'); /// DOESN'T WORK!!!
return $fields;
}
}//class
Note: I'm not getting any errors. I'm just still seeing the field on the forms (Add and Edit) as usual.
Any help appreciated, thanks.
Okay, I found the issue.
I was just going over the API again for the millionth time, and recognized that I've named the function wrong. See correction below:
///Correction, forgot to add the 's' at the end of both the function and the parent call.
public function getCMSFields(){
$fields = parent::getCMSFields();
}
I can understand an error not being generated in Apache logs for the function because it's legit. But as for the parent call, it should of generated an error since the method don't exists. (Theory: Perhaps, since the function was never actually being called, the parent call wasn't being executed and thus no errors [run-time error]).

Polymer-Dart Equivalent Functions

I'm trying to work through a Google I/O codelab for the Material Design Web App, but port it to the Dart language. http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#4
I'm at the step where you toggle the drawer, but I can't figure out the dart equivalent.
The JS code to toggle the drawer looks like this:
<script>
Polymer('codelab-app', {
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
}
});
</script>
I have tried the following in my CodelabApp class, but I get a NoSuchMethodError: method not found: 'togglePanel'
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
querySelector('core-drawer-panel')..togglePanel();
}
}
my button element properly fires, but I can't figure out how to call the drawer's togglePanel method. <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
any help or direction to the proper docs would be greatly appreciated.
UPDATE:
This has been fixed in recent versions: https://github.com/dart-lang/core-elements/issues/39
Updating the polymer and core_elements libraries works as expected.
While attempting to commit my own fix to this, I discovered a temporary workaround that works in my case. Maybe will work for you :)
Add the following to the top of your file:
import 'dart:js' show JsObject;
_js(x) => new JsObject.fromBrowserObject(x);
Then change your custom tag code:
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
_js(shadowRoot.querySelector('core-drawer-panel')).callMethod('togglePanel');
}
}
For reference I found this solution by reading through the code here:
https://github.com/dart-lang/core-elements/blob/master/example/core_drawer_panel.html#L68-L81

How to use animationFrame in Dart?

The following code throws the exception "type '([int]) => void' is not a subtype of type 'RequestAnimationFrameCallback' of 'callback'."
import 'dart:html';
void main() {
window.animationFrame.then((time) => print("test"));
}
If I change window.animationFrame.then to window.requestAnimationFrame, everything works as expected. Am I misunderstanding how Dart futures work?
Usage looks right.
Either you are running an older version that doesn't yet implement the behavior that is specified in the documentation or it is simply a bug. I would go ahead and file an issue on http://dartbug.com/new

Resources