I am adding/removing a class based on boolean value. Works as just a bool but not if bool in array
This line works, the opaque class gets added/removed:
<img v-bind:class="{opaque: slide1}" src="img/forest-field.jpg" />
This line does not work, the opaque class does not get added/removed:
<img v-bind:class="{opaque: slideBools[0]}" src="img/forest-field.jpg" />
the code in instance data:
new Vue({
el: '#myCarousel',
data: {
slideBools: [true, false, false, false],
slide1: true,
slide2: false,
slide3: false,
slide4: false,
},
},
});
I am updating the bool value in an instance method like this:
methods: {
startSlides: function () {
var vm = this;
setInterval(() => {
vm.slideBools[vm.curImage] = true;
}, 4000);
},
}
Update question: I am wondering if how I reference the array value from html is where the problem lies
While updating the array value use Vue.set or its alias this.$set method to reflect in the DOM since its a nested property updating directly won't reflect in all cases.
this.$set(this.slideBools, 0, true)
Refer Vue documentation about reactivity for more information.
UPDATE : In your case, the code would be like as follows:
methods: {
startSlides: function () {
var vm = this;
setInterval(() => {
v.$set(vm.slideBools, vm.curImage, true);
}, 4000);
},
}
Try changing your data prop to:
data() {
return {
slideBools: [true, false, false, false],
slide1: true,
slide2: false,
slide3: false,
slide4: false,
};
},
I'm trying to set the inactivityTimeout on my video element to shorten the time it takes for the control bar to hide. However, the following doesn't seem to change it:
const opts = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
},
inactivityTimeout: 100,
};
videojs(myVideoEl, opts);
When I do this it does work, but I get a warning:
player.options().inactivityTimeout = 500;
VIDEOJS: WARN: this.options() has been deprecated and will be moved to
the constructor in 6.0
Does anyone know why I can't seem to set it using the options?
var player = videojs("sessionsimple-player",{
inactivityTimeout: 100,
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
}
});
Note: Do not use both data-setup and an options object.
https://docs.videojs.com/tutorial-setup.html#options
We are using dojo without pagination and showing all records at once. We need to call a java script method when the entire grid has been rendered completely, so that the grid rows and cell can be used for DOM manipulation.
I am trying following code, but its not working.
aspect.after(grid,"dgrid-refresh-complete",function(){
});
grid.on("dgrid-refresh-complete", function(event){
});
dgrid-refresh-complete is implemented specifically in OnDemandList and Pagination. If you're using the SingleQuery mixin instead (as in the tutorial for 0.3 or 0.4), it should be feasible to institute the same kind of event as follows:
var self = this;
// existing code from refresh...
// when(...) (via dojo/when) should only be necessary here for dgrid 0.3
var promise = when(this._trackError(/* existing code from refresh */));
promise.then(function () {
on.emit(self.domNode, 'dgrid-refresh-complete', {
bubbles: true,
cancelable: false,
grid: self
});
});
return promise;
So, for example, in 0.3, SingleQuery's refresh method would look like this:
refresh: function () {
var self = this;
// First defer to List#refresh to clear the grid's
// previous content
this.inherited(arguments);
if (!this.store) {
return;
}
var promise = when(this._trackError(function () {
var queryOptions = self.get('queryOptions'),
results = self.store.query(
self.query, queryOptions);
return self.renderArray(
results, null, queryOptions);
}));
promise.then(function () {
on.emit(self.domNode, 'dgrid-refresh-complete', {
bubbles: true,
cancelable: false,
grid: self
});
});
return promise;
}
I'm really confused as to some behavior I'm seeing in trying to learn the AMD style of Dojo. When I instantiate my module/object, "this" refers to the object in my constructor. I make a call to an internal function, and "this" inside that internal function refers to the Window object. So when I get to this.attachMapEventHandlers I get a "Object [object global] has no method 'attachMapEventHandlers'" error. What am I doing wrong? UPDATE: I found lang.hitch, which seems to indicate that the async nature is what's tripping me up, but I'm confused on how to implement a solution.
my script inside index.html:
require(["javascript/layout", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/layout/AccordionContainer",
"dojo/dom", "dojo/dom-attr", "dijit/Toolbar", "dijit/form/Button", "dijit/Dialog","dijit/ProgressBar", "dojo/domReady!"],
function (layout, dom, domAttr) {
mapControl = new layout();
layout.js:
define(["dojo/_base/declare"], function(declare) {
return declare(null, {
action:"pan",
activeMeasureTool:"",
aerialLayer:"",
legendLayers:"",
loadedServices:"",
popup:"",
resizeId:0,
constructor: function() {
this.init();
},
init: function() {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {extent: startExtent, isZoomSlider:true, logo:false, sliderStyle:"large"});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
});
},
There are a couple of things that you could do to resolve this.
Firstly, you could add your required dependency to the define array so you don't need to do an asynchronous require within the constructor of the class.
That would look like:
define(["dojo/_base/declare", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], function (declare, Map, config, SpatialReference, Extent) {
return declare(null, {
action: "pan",
activeMeasureTool: "",
aerialLayer: "",
legendLayers: "",
loadedServices: "",
popup: "",
resizeId: 0,
constructor: function () {
this.init();
},
init: function () {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
}
});
});
OR you could save the current scope of this to something in the closure when doing the require
init: function () {
var that = this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function (Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
that.attachMapEventHandlers();
that.createLayers();
that.handleLayerVisibilityChange();
});
},
EDIT: your third option would be using lang.hitch, which lets you specify the scope of this in the the callback function. To use it, you would add dojo/_base/lang to you define() dependency list, and wrap the require callback in lang.hitch(this, function(){});
define(["dojo/_base/declare", "dojo/_base/lang"], function (declare, lang) {
return declare(null, {
//...
init: function () {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
lang.hitch(this, function (Map, config, SpatialReference, Extent) {
//this now refers to the instance of the class
}));
}
});
});
I would strongly suggest going with the first option, since it is consistent with the entire use of AMD (declaring what dependencies a module needs before it executes, rather than loading it on the fly).
You can put 'this' in another variable, like _this, and use _this in your internal function,like
init: function() {
var _this= this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
...
_this.attachMapEventHandlers();
_this.createLayers();
_this.handleLayerVisibilityChange();
In WinJS there are three binding related mixins:
WinJS.Binding.observableMixin
WinJS.Binding.dynamicObservableMixin
WinJS.Binding.mixin
Both WinJS.Binding.mixin and WinJS.Binding.dynamicObservableMixin define the same methods to mix. The only difference between their definition is that WinJS.Binding.mixin is defined as a non enumerable property on the WinJS.Binding namespace, while WinJS.Binding.dynamicObservableMixin is defined as an enumerable property:
WinJS.Namespace.define("WinJS.Binding", {
mixin: { value: dynamicObservableMixin, enumerable: false, writable: true, configurable: true },
dynamicObservableMixin: { value: dynamicObservableMixin, enumerable: true, writable: true, configurable: true },
});
I don't see any real difference between these two mixins - I don't see the relevance of the difference of the enumerable flag on this property. Is there any semantic or other difference as to which mixin of the two one is using?
You are right. There is no real difference between mixin and dynamicObservableMixin. They are same.
WinJS.Binding.mixin adds methods like addProperty, removeProperty, get/setProperty which are used by WinJS.Binding.expandProperties. expandProperties is used to make an existing class observable. dynamic nature is attributed to dynamically adding properties to an object.
Example:
var MyListViewModel = WinJS.Class.define(
function MyListViewModel_ctor()
{
this._initObservable();
},
{
load: function load()
{
var self = this;
return serviceclient.getMyListData().then(function (records)
{
self.items = new WinJS.Binding.List(records);
});
}
});
WinJS.Class.mix(MyListViewModel,
WinJS.Binding.mixin,
WinJS.Binding.expandProperties({ items: '' }));
There is difference between observableMixin and mixin. observableMixin only has bind, unbind and notify methods.