This maybe a somewhat straightforward question but I'm looking to change an old Vue.directives into a Vue.component and am still pretty new to the Vue world. I can't seem to get Tinymce to work within a component and I am open to any and all suggestions.
<div id="tinymce-form">
<textarea
id="editor"
rows="10"
v-tinymce-editor="content">
{{content}}
</textarea>
Html: {{content}}<br />
Markdown: {{ content | markdown}}
</div>
Vue.directive('tinymce-editor',{
twoWay: true,
bind: function() {
var vm = this;
tinymce.init({
selector: '#editor',
setup: function(editor) {
editor.on('init', function() {
tinymce.get('editor').setContent(vm.value);
});
editor.on('keyup', function() {
var new_value = tinymce.get('editor').getContent(vm.value);
vm.set(new_value)
});
}
});
}
})
Vue.filter('markdown', function(value){
return toMarkdown(value);
})
new Vue({
el: 'body',
data: {
content: 'Editable Text Goes Here',
}
})
Related
I am using Ionic 1.3.3. I want to add an action event to the slides, but the event doesn't fire at all. Nothing is appearing in the console for the following:
template:
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="profile in home.profiles">
<div class="card image">
<div id="container-{{profile.$id}}"></div>
</div>
<div class="item">
<h2>{{profile.displayName}}, {{profile.age}} (<i class="ion-heart"></i> {{profile.stars}})</h2>
</div>
</ion-slide-page>
</ion-slides>
controller:
app.controller('HomeCtrl', function (Auth, $ionicLoading, $scope, $ionicSlideBoxDelegate) {
var home = this;
$scope.options = {
loop: false,
speed: 800,
pagination: false,
};
$scope.$on('$ionicSlides.sliderInitialized', function (event, data) {
// data.slider is the instance of Swiper
console.log('initialized');
$scope.slider = data.slider;
});
$scope.$on('$ionicSlides.slideChangeStart', function (event, data) {
console.log('Slide change is beginning');
});
$scope.$on('$ionicSlides.slideChangeEnd', function (event, data) {
// note: the indexes are 0-based
console.log('Slide change ended');
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
});
I copy-pasted most of this from the ionic v1 docs. What am I missing?
I am trying to kendo mvvm bind within a template. Template variables are working but none of the MVVM stuff is.
<div id="list"></div>
<script id="template" type="text/x-kendo-template">
<div>
<button data-bind="visible: alreadyAttending, click: onClick">
Your id is ${ID}
</button>
</div>
</script>
var data = [];
data[0] = { alreadyAttending: true, ID: 1, onClick: function() { alert("Click 1"); }};
data[1] = { alreadyAttending: false, ID: 2, onClick: function() { alert("Click 2"); }};
$("#list").kendoListView({
dataSource: data,
template: kendo.template($("#template").html())
});
Fiddle available here: https://jsfiddle.net/q99ufo3c/5/
You can see the buttons are replaced with values from the data array, but visibility and click events are not wired up. I'm not sure what I'm missing. Does anyone know if this is supported?
You need to define some data attribute to the div element so that Kendo can bind it correctly to your View Model.
data-role="listview" - defines a listview component;
data-template="yourtemplateid" - defines the template to be used;
data-bind="source: dataSource" - defines what is the data
source of the listview component;
In the Javascript you need to have a Model that represents your object that will be in the data source of the list view. I created one called vm and I have chosen to use the ObservableObject extend method because it is useful when you want to create an object with default values, such as the onClick method.
Please, take a look at the Snippet below.
(function() {
var vm = kendo.data.ObservableObject.extend({
init: function(values) {
var defaultValues = {
alreadyAttending: false,
ID: null
};
kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values));
},
onClick: function() {
alert(this.get("ID"));
}
});
var source = [
new vm({
alreadyAttending: true,
ID: 1
}),
new vm({
alreadyAttending: false,
ID: 2
})
];
var mainViewModel = kendo.observable({
dataSource: source
});
kendo.bind($("#list"), mainViewModel);
})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="list" data-role="listview" data-template="template" data-bind="source: dataSource"></div>
<script id="template" type="text/x-kendo-template">
<div>
<button data-bind="visible: alreadyAttending, click: onClick">
Your id is #:ID#
</button>
</div>
</script>
</body>
</html>
How i can send data between controllers AngularJS in my occasion?
I wanna send result of scanned qr code into things[] and,of course, show it.
I'm beginner in AngularJS and JavaScript and making this program just for me
App.js:
var MKscanner = angular.module('starter', ['ionic', 'ngCordova', 'ngStorage'])
MKscanner.controller('scanBarCtrl', function($scope, $cordovaBarcodeScanner) {
$scope.input ={
MyText : ''
};
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan(
{
preferFrontCamera : false,
orientation : 'portrait'
}).then(function (result) {
alert(result.text);
},
function (error) {
alert('Scanning failed: ' + error);
});
};
});
MKscanner.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _remove = function (thing) {
$localStorage.things.splice($localStorage.things.indexOf(thing), 1);
}
return {
getAll: _getAll,
add: _add,
remove: _remove
};
});
MKscanner.controller( 'MainCtrl', function ($scope, StorageService) {
$scope.things = StorageService.getAll();
$scope.add = function (newThing) {
StorageService.add(newThing);
};
$scope.remove = function (thing) {
StorageService.remove(thing);
};
});
<div ng-controller="MainCtrl">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Save your own text" ng-model="newThing">
</label>
<button class="button button-clear button-positive icon" ng-click="add(newThing)">
<i class="ion-ios-plus-outline"></i> Add
</button>
</div>
</div>
<ion-list show-delete="false" can-swipe="true">
<ion-item ng-repeat="thing in things">
{{thing}}
<ion-option-button class="button-assertive ion-trash-b" ng-click="remove(thing)"></ion-option-button>
</ion-item>
</ion-list>
</div>
You can share data between controllers using $emit and $broadcast :
These events can be used to send data as well, The classic example is given below. You can share data any controller in the app.
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"></button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
function sendData($scope) {
var arrayData = [1,2,3];
$scope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $http) {
$scope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
getting into AmpersandJs, and having a big showstopper by not figuring out why my sub-view-form isn't rendering it's markup.
My MainView.render, works as should:
render: function() {
BaseView.prototype.render.apply(this, arguments);
this.collectionView = this.renderCollection(this.collection, HSEventView, '.item-container');
this.renderSubview(new HSEventEditView({
action: 'create'
}), '.create-event');
return this;
},
Next, my SubView.render (HSEventEditView):
render: function () {
this.renderWithTemplate();
this.form = new EditForm({
el: this.query('.edit-form'),
submitCallback: function (data) {
debug('submit', data);
}
});
this.registerSubview(this.form);
debug('render.form.el', this.form.el)
}
And finally my FormView:
module.exports = FormView.extend({
initialize: function() {
debug('initialize', this.el)
},
autoRender: true,
fields: function () {
debug('fields!')
var fields = [
new InputView({
label: 'Name',
name: 'name',
value: utils.getDotted(this, 'model.name'),
placeholder: 'Name',
parent: this
})
];
debug('fields', fields)
}
});
The MainView and SubView renders fine, but the 'div.edit-form' DOM-node, where the form markup should be, is empty.
I have tried all variations of including a subview I could dig up, but obviously I am blind to something.
Thanks!
PS! Here is the rendered markup:
<section class="page">
<h2>Events collection</h2>
<hr>
<div class="tools">(Tools comming...)</div>
<hr>
<div class="item-container events">
<div class="item event">
<h3>Event: <span data-hook="name">Event 1</span></h3>
</div>
</div>
<hr>
<div class="create-event">
<div class="item event">
<h3>Create event: <span data-hook="name"></span></h3>
<div class="edit-form"></div>
</div>
</div>
</section>
Since fields is a function, you need to return the fields. In your Formview:
fields: function () {
debug('fields!')
var fields = [
new InputView({
label: 'Name',
name: 'name',
value: this.model.name,
placeholder: 'Name',
parent: this
})
];
debug('fields', fields)
// need to return the fields you've declared
return fields;
}
I have a KendoUI dropdownlist which fetches data from a Web Service, depending on the selected item a 2nd dropdown is populated. I am using MVVM binding.
My code looks like:
<div id="ddlDiv">
<div data-container-for="MEASURE" required class="k-input k-edit-field">
<select id="MEASURE"
name="MEASURE"
data-role="dropdownlist"
data-text-field="FIELD_NAME"
data-value-field="FIELD_ID"
data-bind="value: summaryDef.MeasureID, source: fieldList"
></select>
</div>
<div data-container-for="OPERATION" required class="k-input k-edit-field">
<select id="OPERATION"
data-cascade-from: "MEASURE"
data-role="dropdownlist"
data-text-field="TYPE"
data-value-field="OP_ID"
data-source=opListDS
data-bind="value: summaryDef.OperationID"
></select>
</div>
datasetMetaModel = kendo.observable({
fieldList: datasetModel.FieldDTOList,
summaryDef: datasetModel.SummaryDef
});
kendo.bind($("#ddlDiv"), datasetMetaModel);
var opListDS = BuildOperationFields();
function BuildOperationFields() {
opListDS = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetMeasureOperations", "Wizard")',
dataType: 'json',
contentType: "application/json; charset=utf-8",
serverFiltering: true,
type: "GET"
}
}
});
return opListDS;
}
Both lists have their data populated correctly initially and are correctly bound to the model. However changing the value of the first dropdown does not cause the 2nd dropdown to have it's data refreshed. The call to the web service is never triggered.
I've seen a similar situation here that uses local data:
MVVM binding for cascading DropDownList
I don't know if this is still an issue for you as it's been a while since the question was asked but I thought I would answer as I had a similar problem myself today and managed to solve it with a workaround.
What I did was to bind a handler to the onChange event of the parent combo box and in that manually call read() on the data source of the child combo box:
e.g.
HTML:
<div id="content-wrapper">
<div class="editor-row">
<div class="editor-label"><label>Country:</label></div>
<div class="editor-field">
<select id="Country" name="Country" data-role="combobox"
data-text-field="CountryName"
data-value-field="CountryId"
data-filter="contains"
data-suggest="false"
required
data-required-msg="country required"
data-placeholder="Select country..."
data-bind="source: dataSourceCountries, value: country, events: { change: refreshCounties }">
</select>
<span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
</div>
</div>
<div class="editor-row">
<div class="editor-label"><label>County:</label></div>
<div class="editor-field">
<select id="County" name="County" data-role="combobox"
data-text-field="CountyName"
data-value-field="CountyId"
data-filter="contains"
data-auto-bind="false"
data-suggest="false"
data-placeholder="Select county..."
data-bind="source: dataSourceCounties, value: county">
</select>
<span class="field-validation-valid" data-valmsg-for="County" data-valmsg-replace="true"></span>
</div>
</div>
then my view model:
$ns.viewModel = kendo.observable({
dataSourceCountries: new kendo.data.DataSource({
transport: {
read: {
url: href('~/Api/GeographicApi/ListCountries'),
dataType: 'json'
}
},
schema: {
data: function (response) { return response.Data || {}; }
}
}),
dataSourceCounties: new kendo.data.DataSource({
transport: {
read: {
url: function () { var combobox = $('#Country').data('kendoComboBox'), id = combobox !== undefined ? combobox.value() : 0; return href('~/Api/GeographicApi/ListCountiesByCountryId/' + id) },
dataType: 'json'
}
},
schema: {
data: function (response) { return response.Data || {}; }
}
}),
refreshCounties: function (e) {
var countiesList = $('#County').data('kendoComboBox');
e.preventDefault();
countiesList.dataSource.read();
}
});
kendo.bind($('#content-wrapper'), $ns.viewModel);
Hope this helps if you have not already found a solution...