Hi I just saw a tutorial on creating ember-addon using ember-cli.
replicating it
versions
Ember Inspector
1.7.3
Ember
1.11.1
Ember Data
1.0.0-beta.16.1
jQuery
1.11.3
EmberComputedFilter
0.0.0.547aa481
command
ember addon ember-computed-filter
//tests/dummy/app/controllers/application.js
import Em from 'ember';
export default Em.Controller.extend({
name: 'Myname',
trimmedName: function() {
return this.get('name').trim();
}.property('name')
});
Issue is definitely with computed property.
I am not sure of my controller is placed in right folder
I missed this one https://github.com/ember-cli/ember-cli/pull/3645
from the guides. http://guides.emberjs.com/v1.11.0/configuring-ember/disabling-prototype-extensions/
// This won't work:
fullNameDidChange: function() {
console.log("Full name changed");
}.observes('fullName')
// Instead, do this:
fullNameDidChange: Ember.observer('fullName', function() {
console.log("Full name changed");
})
Related
Suppose i want to override a function inside the native code provided by Sencha in the file ext-all-debug.js.
The function is defined inside the Ext.util.Renderable-class and has the name cacheRefEls.
The overriding should take place inside the index.html of the project to make it easier to maintain for future releases.
I have already tried out the override solutions proposed inside this thread:
Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples)
My index.html looks as follows:
<html>
...
<script type="text/javascript">
Ext.define('Myapp.view.Renderable', {
override: 'Ext.util.Renderable',
cacheRefEls: function(el) {
console.log("in overider method");
//my adapted version of it
}
});
</script>
...
</html>
Unfortunately after accessing the localhost:8080 over Firefox-33 it is visible from the Firebug-2-Console-log that it still uses the native version of the function.
What am i missing here?
In ExtJS 5, you need to move these methods to the privates configuration.
You should have seen the error:
Public method "cacheRefEls" conflicts with private framework method declared by Ext.util.Renderable
You can still override the private method. In your case, the solution would be:
Ext.define('Myapp.view.Renderable', {
override: 'Ext.util.Renderable',
privates: {
cacheRefEls: function(el) {
console.log("in overider method");
//my adapted version of it
}
}
});
Hi I'm using dojo in amd mode for my main app (html page). I would like to create a module that references d3 library to create some charts. I'm having trouble creating this module -- what I've got so far for the module (a javascript file) is this:
define(["d3"], function (d3) {
return {
setd3ChartData: function () {
//this function can be called from my main app
//but d3 isnt linked to the d3 js library
}
}
});
in my main app I've got a link to the d3 libary in a script tag
How can I get this script link into the module? I can access d3 library just fine from main app
Thanks
Pete
When you want to use D3 with Dojo you probably first want to define the D3 package in your Dojo config. For example (when using a CDN):
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "d3",
location: "http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/"
}]
}
</script>
Then you can use D3 by using:
require([ "d3/d3" ], function(d3) {
// Do stuff with "d3"
});
The reason you have to use "d3/d3" and not just "d3" is that the part before the / indicated the package name, in this case it's d3 (which we configured using dojoConfig).
The second part is the actual file, or in this case d3.js.
I also made a JSFiddle to show a working example of D3 loaded using the AMD loader. In that example I placed the Dojo configuration under the Fiddle options, but the setup is the same.
I also renamed the callback to d3Lib, because D3 by defaults creates the d3 global variable and now you can clearly see it's working with AMD.
If you want to use the minified version you can load "d3/d3.min".
I'm having an issue here when attempting to build an integration to our partners. They're gonna submit an image URL as a GET-variable, which I obviously don't want to print straight up. The submitted image URL is submitted back to our servers with AJAX to be sanitized, returned and then updated.
What I want to do here is when the model loads, I want to display a placeholder image, and when the sanitation check is done by the server, it will return the URL (the same or another placeholder) that is to be set as the template image source.
Now, the problem is that I don't get how to make Ember listen for the update of this event. I'm trying to use observes, but apparently, this isn't available in the route. Here's my current code:
ROUTE
MyApp.PartnerRoute = Ember.Route.extend({
imageUrl: "/img/placeholder.png";
getImageUrl: function(imageUrlToCheck) {
instance = this;
$.ajax({
url: "/ajax/get-image-url",
type: "post",
data: {
"imageUrl": imageUrlToCheck
},
success: function(response) {
if(response.status === 0) {
instance.set("imageUrl", response.data.imageUrl);
}
}
});
},
// Ember update property.
imageUrlDidChange: function() {
this.get("imageUrl");
}.observes("imageUrl"),
model: function(params) {
this.getImageUrl(params.imageUrl);
return {
heading: "Welcome!",
imageUrl: this.imageUrl
}
}
});
VIEW
<script type="text/x-handlebars" data-template-name="partner">
<h1>{{heading}}</h1>
<img {{bind-attr src=imageUrl}} />
</script>
I get the error message:
Uncaught TypeError: Object function () {
this.get("imageUrl");
} has no method 'observes'
I'm not at all sure as of how to make this happen. Am I going about this the wrong way? Any help is appreciated.
Thank you for your time.
Best regards,
dimhoLt
PS. I've extracted the applicable pieces of code from much bigger objects, so if there are any typos, missing commas etc, it's due to the copy-paste and is not applicable to the actual code.
EDIT:
Worth noting is that because of legacy functionality I haven't yet rewritten, I was forced to turn off Ember extended prototypes. This is, I guess, the major cause of the issue.
Since I wrote this, I've also gone over to using a fixed model instead of attempting to work directly with the route.
You need to use a setter
http://emberjs.jsbin.com/OxIDiVU/117/edit
model: function(params) {
var model = {
heading: "Welcome!",
imageUrl: this.imageUrl
};
this.getImageUrl(params.imageUrl).then(function(result){
Em.set(model, 'imageUrl', result.imageUrl);
});
return model;
}
I found the way to implement listeners for components in EXTJS MVC. But I cannot find the way to add listeners for grid plugins at controller.
not sure if it can help you, I my self now use ComponentQuery directly to retrieve currently edited field.. check it..
ExtJS 4 - How to listen event of each field within roweditor inside controller
The below example worked for me. That is to say, I can now handle plugin events in my controller. Since I was developing a custom plugin and you are using a packaged plugin, your approach will be a little different. I think you should extend the plugin that you want to use, adding the "mixins" and "relayEvents" concepts from my example. You could also create an override for the plugin you are using.
Ext.define( "Ext.ux.MyController", {
extend: "Ext.app.Controller",
init: function() {
this.control( {
"mycomponentxtype": {
"load": function(){ ... },
"unload": function(){ ... }
}
} )
}
} );
Ext.define( "Ext.ux.MyPlugin", {
extend: "Ext.AbstractPlugin",
alias: "plugin.myplugin",
mixins: [
"Ext.util.Observable"
],
config: {
...
},
init: function( myComponent ) {
var me = this;
// contruction of the mixin is required.
me.mixins["Ext.util.Observable"].constructor.call( me );
myComponent.relayEvents( me, [ "load", "unload" ] );
.
.
.
}
} );
Even though the original question is from early 2013. I came to this post in mid-2014 in search of an adequate answer and did not find it. This is essentially how I solved my problem. I hope it helps!
This has been answered, though specifically for rowEditing plugin, it should be applicable to any plugin:
Ext JS 4 - How to control rowEditor inside controller
My website is generating some content dynamically, so I have to somehow launch the highlight.js plugin again after loading it.
This code is used to launch the highlighter:
hljs.initHighlightingOnLoad();
I tried to do something like hljs.initHighlighting(); to do this again but it does not work.
You must set called to false first:
hljs.initHighlighting.called = false;
hljs.initHighlighting();
You can reinitialize all of the codeblocks like this.
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
or if you have a div with an ID of myBlock, you can do this.
$(document).ready(function() {
$('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});
i hope this could solve your problem..
you have to use
hljs.highlightAll()
since, hljs.initHighlightingOnLoad() is deprecated since version 10.6.
if you're using react, you could apply at componentdidMount..
useEffect(() => {
hljs.highlightAll()
}, []);
or, if another framework, please call that function when page loaded.
more: https://highlightjs.readthedocs.io/en/latest/api.html