This is my first question here, so I hope do it in the right way.
I'm trying to use ember-cli-g-maps in my project. The tool is great, but I'm having great dificulties in making one of my requirements work.
The chalange is: I create a set of markers setting the "draggable" property to false.
Template
{{g-maps name="map" lat=lat lng=lng zoom=zoom markers=markers idle="onMapIdle" click="onMapClick"}}
Controller
for (let i=0; i< data.stops.length; i++)
{
let stop = data.stops[i];
markers.pushObject(
{
id: stop.id, // Recommended
lat: stop.coordinate[0],
lng: stop.coordinate[1],
draggable: false,
icon:
});
}
The markers are added correctly in the map.
But I want to make all markers draggable when the user press a button .
This is how I trying to do it.
enableMarkersDrag()
{
for (var i=0; i<this.get('markers').length; i++)
{
this.get('markers')[i].draggable = true;
}
},
This doesn't work immediatelly, but it does when I make some change in the "markers" array, adding or removing an item. It is a MuttableArray.
I understand why. This is because the observer is observing the array, not the properties inside the array.
But I believe that 'add' and 'remove' an item just to trigger the observer is not the right way to do it. Do you guys know the clean way of doing this?
Thanks in advance;
Related
I've been stuck on this issue for about a week now, and I am not exactly sure how to solve it.
What I am trying to do is set the focus of ember-power-select from triggering an
I am currently able to set focus to the power select via tabbing or clicking, however I can't seem to gain its focus from another action.
(Like the hacky way I can think of is to call handleFocus directly and pass a select object)
In Component.hbs:
{{#power-select
class='ls-search-box'
options=searchList
selected=selected
onfocus=(action "handleFocus") as |item|
}}
In Component.js:
actions: {
handleFocus(select, e){
select.actions.open()
},
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box");
if(input) {
input.focus();
}
}
}
Any know what I should do?
You need to change focusSearch like :
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box > .ember-power-select-trigger");
if(input) {
input.focus();
}
}
You used a wrong css selector
I'm using polymer 1.0.
I'm trying to open a with on a clic on an element created dynamically with template repeat.
Here is the code :
<paper-button
data-dialog="modal"
on-click="dialogClick">
Click
</paper-button>
and the script (from doc) :
dialogClick: function(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
alert(dialog);
if (dialog) {
dialog.open();
}
}
This work only if the value of data-dialog is simple text. If I want to change it by data-dialog="{{item.dialogName}}" for instance, it doesn't work. It is not found by the while loop and exit with the if. in the source code of the page, there is no data-dialog in the paper-button.
Any idea ?
I've ran into a similar problem when using data attributes on custom elements. You might want to subscribe to this polymer issue.
As a workaround, place the data attribute in a standard element that is a parent of the button and search for that one instead.
Also, you might want to consider using var button = Polymer.dom(e).localTarget instead of directly accessing e.target, since the later will give you an element deeper in the dom tree under shady dom.
Wondering if someone might help with another pair of eyes - as I am trying to work out why some of my Famo.us 'Views' are being displayed despite having an opacity StateModifier set to '0'.
Here is my code - My apologies for it not being standard - I have "Panels" instead of "Views" and a few other things..but happy to expand on the code if needed.
function _buildSidePanel() {
this._sidePanel = _createPanel.call(this);
this._sidePanel.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu);
this._sidePanel.position = this.cm(this.constructor.DEFAULT_OPTIONS.sideMenu.position);
this._container.add(this._sidePanel.position).add(this._sidePanel);
this._menuHolder = _createPanel.call(this); //My version of a View
this._menuHolder.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder);
// Create StateModifiers
this._menuHolder.position = this.cm({ align: [.5,.6], origin: [.5,.6], proportions: [.9,.8] });
this._menuHolder.fadeState = this.cm({ opacity: 0 });
this._menuHolder.sizeState = this.cm();
this._menuHolder.mC = new ModifierChain();
this._menuHolder.mC.addModifier(this._menuHolder.fadeState);
this._menuHolder.mC.addModifier(this._menuHolder.sizeState);
this._menuHolder.mC.addModifier(this._menuHolder.position);
/* Tried splitting it to just modifiers but getting the same thing
this._sidePanel._container.add(this._menuHolder.fadeState)
.add(this._menuHolder.sizeState)
.add(this._menuHolder.position)
.add(this._menuHolder);
*/
this._sidePanel._container.add(this._menuHolder.mC).add(this._menuHolder);
// this._menuHolder.fadeState.setOpacity(1,this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder.transition.in);
}
I have created a ModifierChain and added among other things an Opacity State of 0. When I add this and then add the modifier and 'View' to the container it displays the View even though the View has a StateModifier of '0' so should not be displayed.
The 'fadeState.setOpacity' command is meant to transition the fadeState to display the View but it is commented out, so the View should not be displayed.
I have this working in other areas so know the approach works. I am also (hopefully) not using the same variable names, so not using a StateModifier more than once. But still stuck as to why this is being displayed.
Any help or thoughts would be gratefully appreciated.
Thanks.
I have a global singleton "Settings" which holds application settings. When I try to run the following code I get a QML CheckBox: Binding loop detected for property "checked":
CheckBox {
checked: Settings.someSetting
onCheckedChanged: {
Settings.someSetting = checked;
}
}
It is obvious why this error occurs, but how can I correctly implement this functionality without a binding loop? E.g. I want to save the current checked state of the checkbox in the settings singleton.
I am using Qt 5.4 and Qml Quick 2.
Regards,
Don't bind it. Because the check box does not fully depend on Setting.someSetting.
When a user clicked the checkbox, the CheckBox.checked is changed by itself. At the same time, the property binding is no longer valid. Settings.someSetting cannot modify the CheckBox after it is clicked by user. Therefore, the checked: Settings.someSetting binding is wrong.
If you want to assign an initial value to the check box when the component is ready, use Component.onCompleted to assign it:
CheckBox {
id: someSettingCheckBox
Component.onCompleted: checked = Settings.someSetting
onCheckedChanged: Settings.someSetting = checked;
}
If you are working on a more complex scenario, the Setting.someSetting may be changed by some other things during runtime and the state of the check box is required to be changed simultaneously. Catch onSomeSettingChanged signal and explicitly changed the check box. Submit the value of someSettingCheckBox to Settings only when the program/widget/dialog/xxx finished.
CheckBox { id: someSettingCheckBox }
//within the Settings, or Connection, or somewhere that can get the signal.
onSomeSettingChanged: someSettingCheckBox.checked = someSetting
I prefer this solution
// Within the model
Q_PROPERTY(bool someSetting READ getSomeSetting WRITE setSomeSetting NOTIFY someSettingChanged)
void SettingsModel::setSomeSetting(bool checkValue) {
if (m_checkValue != checkValue) {
m_checkValue = checkValue;
emit someSettingChanged();
}
}
// QML
CheckBox {
checked: Settings.someSetting
onCheckedChanged: Settings.someSetting = checked
}
The trick is you protect the emit with an if check in the model. This means you still get a binding loop but only a single one, not an infinite one. It stops when that if check returns false thereby not emitting to continue the loop. This solution is very clean, you do not get the warning, and yet you still get all the benefits of the binding.
I want to talk about the limitations of the other solutions presented
CheckBox {
Component.onCompleted: checked = Settings.someSetting
onCheckedChanged: Settings.someSetting = checked;
}
In this solution you lose your binding. It can only have a default setting on creation and be changed by the user. If you expand your program such that other things change the values in your model, this particular view will not have a way to reflect those changes.
Settings {
id: mySettings
onSomeSettingChanged: checkBox.checked = someSetting
}
CheckBox {
id: checkBox
onCheckedChanged: mySettings.someSetting = checked
}
This solution was mentioned to address these problems but never written out. It is functionally complete. Model changes are reflected, the user can change the data, and there are no binding loops because there are no bindings; only two discrete assignments. (x: y is a binding, x = y is an assignment)
There are a couple problems with this. The first is that I think its ugly and inelegant, but that is arguably subjective. It seems fine here but if you have a model representing 10 things in this view, this turns into signal spaghetti. The bigger problem is that it does not work well with delegates because they only exist on demand.
Example:
MyModel {
id: myModel
// How are you going to set the check box of a specific delegate when
// the model is changed from here?
}
ListView {
id: listView
model: myModel.namesAndChecks
delegate: CheckDelegate {
id: checkDelegate
text: modelData.name
onCheckStateChanged: modelData.checkStatus = checked
}
}
You can actually do it. I've made up custom QML signals and connections to do it, but the code complexity makes me want to hurl, and even worse you could possibly be forcing creation of a delegate when it is not necessary.
If you don't want to make a binding loop - don't make a binding, use a proxy variable, for example. Other simple solution can be to check the value:
CheckBox {
checked: Settings.someSetting
onCheckedChanged: {
if (checked !== Settings.someSetting) {
Settings.someSetting = checked;
}
}
}
You can also make two-way binding to resolve this issue:
CheckBox {
id: checkBox
Binding { target: checkBox; property: "checked"; value: Settings.someSetting }
Binding { target: Settings; property: "someSetting"; value: checkBox.checked }
}
Sometimes it is useful to separate input and output values in control. In this case control always displays real value and it can also show a delay to the user.
CheckBox {
checked: Settings.someSetting
onClicked: Settings.someSetting = !checked
}
I am creating a custom item editor, and am using the following blog post as a reference for responding to the "save" event in the Content Editor, so that I do not need to create a second, confusing Save button for my users.
http://www.markvanaalst.com/sitecore/creating-a-item-editor/
I am able to save my values to the item, but the values in the normal Content tab are also being saved, overriding my values. I have confirmed this via Firebug. Is there a way to prevent this, or to ensure my save is always after the default save?
I have this in as a support ticket and on SDN as well, but wondering what the SO community can come up with.
Thanks!
Took a shot at an iframe-based solution, which uses an IFrame field to read and save the values being entered in my item editor. It needs to be cleaned up a bit, and feels like an interface hack, but it seems to be working at the moment.
In my item editor:
jQuery(function () {
var parentScForm = window.parent.scForm;
parentScForm.myItemEditor = window;
});
function myGetValue(field) {
var values = [];
jQuery('#myForm input[#name="' + field + '"]:checked').each(function () {
values.push(jQuery(this).val());
});
var value = values.join('|');
return value;
}
In my Iframe field:
function scGetFrameValue() {
var parentScForm = window.parent.scForm;
if (typeof (parentScForm.myItemEditor) != "undefined") {
if (typeof (parentScForm.myItemEditor.myGetValue) != "undefined") {
return parentScForm.myItemEditor.myGetValue("myLists");
}
}
return null;
}
In theory, I could have multiple fields on the item which are "delegated" to the item editor in this way -- working with the content editor save rather than trying to fight against it. I'm a little uneasy about "hitchhiking" onto the scForm to communicate between my pages -- might consult with our resident Javascript hacker on a better method.
Any comments on the solution?
EDIT: Blogged more about this solution