Volodymyr's public fiddles
-
Marionette.js. CollectionView. Automatic Rendering after Initial CollectionView.render()
After the initial render, the collection view binds to the "add", "remove" and "reset" events of the collection in the CollectionView
-
Marionette.js. CollectionView's. isEmpty - setting criteion of emptiness for collection
If you want to control when the empty view is rendered, you can override `isEmpty`. For example, we can declare as empty a collection containing fewer than 3 models.
-
Marionette.js. CollectionView's "emptyView"
When a collection has no children, and you need to render a view other than the list of childViews, you can specify an `emptyView` attribute on your collection view. The `emptyView` just like the `childView` can also be passed as an option on instantiation or can be a function that returns the `emptyView`.
-
Marionette.js. CollectionView's. childViewOptions are passed to View's initialize method
There may be scenarios where you need to pass data from your parent collection view in to each of the childView instances.
-
Marionette.js. CollectionView's - childView as a function
Specify a childView in your collection view definition. This must be a Backbone View Class definition, not an instance. It can be any Backbone.View or be derived from Marionette.View.
-
Marionette.js - View's templateContext property
The Marionette.View provides a templateContext attribute that is used to add extra information to your templates.
-
Marionette.js - View for Collection (making it with templating engine - Handlebars of Underscore)
How to render Collection with one View (w/o nested views). Simply pass in the collection as collection property of an option object for a View, and it will be available to the template as an "items" environment variable.
-
Marionette.js - View.getTemplate() - dynamic templates based on model
The getTemplate function is used to choose the template to render after the view has been instantiated (use this to change the template based on some simple logic such as the value of a specific attribute in the view's model). The returned value can be either a jQuery selector or a compiled template function/
-
Marionette.js. - basic View. Rendering a Template
The Marionette View implements a powerful render method which, given a template, will build your HTML from that template, mixing in model information and any extra template context.
-
Marionette - mergeOptions() will merge indicated options in an object
In this example, model and something are directly available on the MyObject instance, while another must be accessed via getOption. This is handy when you want to add extra keys that will be used heavily throughout the defined class.
-
Marionette - View.getOption() falls back to View class properties
Marionette - View.getOption() falls back to View class properties, unless the option is not provided with the instance options.
-
Experiment with Backbone
Model, Collection, View
-
Chart.js - использования картинок как шаблона для заливки элементов диаграммы
Картинка создаётся как HTMLImageElement и используется для создания шаблона заливки (метод createPattern объекта CanvasRenderingContext2D). Объекты Deferred и Promise jQuery используются для загрузки картинок (их в примере 2).
-
Смешанный тип диаграммы - столбцы (bar) + линия (line)
Два объекта набора данных в массиве datasets, в каждом объекте - своё свойство type. Также type для всей диаграммы следует выставить равным 'bar'.
-
Chart.js - пример использования 1
a bar chart showing the number of votes for different colors and the y-axis starting at 0.
-
JS prototypes and inheritance example
There are three types of property/method to consider: 1) those defined inside the constructor, e.g. this.x = x; 2) those defined directly on the constructor themselves. They are chained directly onto a constructor, not an instance. For example, Object.keys(). 3) Those defined on a constructor's prototype, e.g. myConstructor.prototype.x(), which are inherited by all instances and inheriting object classes.
-
Using Jasmine to test JavaScript extensions
Steps to start testing JS code with Jasmine testing framework
-
JS Extensions Paradigm
На примере необходимости посчитать возраст писателей на момент получения ими Нобелевской премии показано создание расширений JavaScript. Также показано применение функций _.map и _.reduce библиотеки Underscore.js и вывод информации с помощью шаблонов Handlebars.js
-
Google Maps 3. Autocomplete places search
The Places Autocomplete feature attaches to a text field on your web page, and monitors that field for character entries. As text is entered, Autocomplete returns Place predictions to the application in the form of a drop-down pick list.
-
Google Maps 2. Positioning InfoWindow
Showing InfoWindow after clicking on a marker and dynamically positioning it relative to the marker