I've been during a while working with Ember.js. Now I'm getting a weird behaviour that I cannot fix. Is not the first time I experience it, but in previous occasions I figured it out after making little changes. But now, I really have no idea what's causing the conflict. The issue is occuring in Controllers. I have this ridiculously simple controller, just for testing:
App.AppColleaguesController = Ember.ArrayController.extend
(
{
needs: ['app'],
aNumber: function()
{
return this.get('controllers.app.personId');
}
}
);
Of course, that property is defined on the AppController:
App.AppController = Ember.ArrayController.extend
(
{
loggedIn: false,
personId: -1,
personName: '',
location: '',
logOut: function()
{
if (window.confirm("Do you want log out?"))
{
this.set('loggedIn', false);
this.set('personId', -1);
this.set('personName', '');
this.set('location', '');
this.send('goToLogin');
}
}
}
);
In my template, I'm getting this result:
... This is a number: function () { return
this.get('controllers.app.personId'); } ...
My template is as straightforward as this:
...
This is a number: *{{aNumber}}*
{{debug}}
{{log aNumber}}
...
The debugging statements in my template are showing me this in Firebug console:
...
Transitioned into 'app.colleagues'
function()
...
So, is like the function is literally echoed, not "interpreted". In fact I'm getting this sort of problem in a couple more of controllers, but the rest of them (they are a lot, like 8 or 10 controllers) are working nice. Do you have any idea about the problem? Is my mistake, or maybe an Ember issue?
Thanks a lot in advance! I hope you can help me.
You forgot the .property after the function. This is needed by Ember to indicate that a function is a computed property.
aNumber: function() {
return this.get('controllers.app.personId');
}.property('app.personId')
Related
The editor work fine except autosave.
I import autosave plugin properly,and I can receive the return data.
https://i.stack.imgur.com/cDW9x.jpg
in this case, i can receive the autosave data.
But I can't call Vue instance inside the autosave function.
https://i.stack.imgur.com/5Nyq4.jpg
https://i.stack.imgur.com/sevjo.jpg
I can't call my vue instance by 'this',that means i can't use methods,vuex store...and so on.
How can i fix hti?
I know this is a bit late but for anyone (like myself) looking for an answer to this I followed the advice in this [SO link][1]
data() {
var self = this
...
return {
editorConfig: {
autosave: {
waitingTime: 3000, // in ms
save(editor) {
self.saveData(editor.getData())
}
},
}
}
}
[1]: https://stackoverflow.com/a/61509032/558720
I got this method
methods: {
insightsSettings () {
import('pages/details/InsightsSettings')
.then(module => {
module.default.props.dashboard.default = 'financial'
this.$modal.open({
component: module.default,
...this.$modalSettings,
parent: this
})
})
}
},
but the code in and after module.default.props.dashboard.default = 'financial' should be put inside an if-else statement to be able to use this code for both .default= 'project' and .default='hr'.
(they all do the same but have a different path leading to this and giving back different info). Does anyone have an idea how to use this? I did try to literally put the code in an if-else statement, but that didn't work
(please keep in mind I'm a newbie at vuejs and could use all the help (; )
I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.
I want to stress that this problem only occurs outside of a template, such as when I try to access properties of related objects while in a controller, unit test, etc. Rendering the template seem to get the property well and work as expected.
Here is a simple example in JS Bin with a failing test http://jsbin.com/ihumuk/4/edit which repros my problem. The passing test asserts that the property is accessible and rendered in the template as expected. The failing test shows that I get null when I try to access the property with get. Really nothing fancy here but I don't understand why it's returning null.
Here is the application part of the JS Bin example:
App.ApplicationRoute = Em.Route.extend({
model: function() {
return App.Foo.find();
}
});
App.Store = DS.Store.extend({
adapter: DS.FixtureAdapter.create()
});
App.Foo = DS.Model.extend({
name: DS.attr("string"),
/**
* The subject under test
*/
childName: function() {
return this.get("child.name");
}.property("child.name"),
child: DS.belongsTo("App.Bar")
});
App.Bar = DS.Model.extend({
name: DS.attr("string")
});
App.Foo.FIXTURES = [{
id: 1,
name: "Fred",
child: 3
}, {
id: 2,
name: "Barney",
child: 4
}];
App.Bar.FIXTURES = [{
id: 3,
name: "Pebbles"
}, {
id: 4,
name: "Bam Bam"
}];
This passes.
test("Child name is rendered", function() {
expect(1);
visit("/").then(function() {
ok(find("div:contains(Pebbles)").length);
});
});
This fails.
test("Child name is accessed", function() {
expect(2);
var foo = App.Foo.find(1);
equal(foo.get("childName"), "Pebbles");
equal(foo.get("child.name"), "Pebbles");
});
This has to be something simple/stupid like forgetting a character or something, but I think I've driven myself too far into frustration to think clearly for a while. Thanks in advance for any help.
You need to use the then to know when the data is loaded
asyncTest("Child name is accessed", function() {
expect(2);
// load the data from server
App.Foo.find(1).then(function(foo) {
// the child id is 3, we need to fetch the remaining data
// and this is async, because of the ajax request
foo.get("child").then(function(child) {
equal(child.get("name"), "Pebbles");
// childName call child.name, but since the
// data is loaded, isn't necessary to use a second then
equal(foo.get("childName"), "Pebbles");
start();
});
});
});
In ember data, like major of the orm's, the data is lazy loaded, for relationships. This is because, isn't needed to return all loaded object graph, let's leave the user ask for what it want, and then load.
Because some implementations are async, like: websql, indexeddb, ajax, websockets etc. The interface of ember-data is async, so you need to use the then method to know when the data is loaded or failed.
The things work in your template, because it are binding aware. Even when the change are async, it will be finished later, and the bindings will be notified and updated.
I have updated your demo, and the tests pass http://jsbin.com/eqojaj/1/edit
Yii newbie here
I have tried more than once to figure out a way to include an Ajax/JS function in an easy clean way in my CGRIDVIEW,
the code is basically
'click'=> "function (){
$.fn.yiiGridView.update('news-grid', {
type:'POST',
url:$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
})
return false;
}"
In your opinion, whats the cleanest, most performance benificial way to include this?
Thank you for your time !!!
I don't know but I dont see necesary to force the grid to update twice on a single operation, I also don't like to include my javascript like that. Depending on what I need there are several approaches, for the sake of this answer ill show you the easiest one:
Create a global object, in a separate file:
//app.js
var App = {
updateSomething: function () {
$.post(
$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
);
return false;
}
};
And the you can include that file from your controller by calling CCLientScript::registerScriptFile
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl."js/app.js");
And on your grid:
'click'=> "js:App.updateSomething",
There are much better approaches, but this is the more simple for js beginners that want to have some kind of organization.