I'm trying to customize and extend datepicker.
First I extended Binder by customValue:
kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
},
refresh: function(e){
var path = this.bindings.customValue.path,
source = this.bindings.customValue.source,
value = source.get(path);
this.element.value(value);
},
change: function(e){
// this method is not triggered
debugger;
}
});
Then I extended DatePicker widget:
CustomDatePicker = kendo.ui.DatePicker.extend({
init: function(element, options) {
kendo.ui.DatePicker.prototype.init.call(this, element, options);
this.bind('change', this.onChange);
},
options: {
name: "CustomDatePicker",
},
onChange: function(e){
debugger;
},
});
kendo.ui.plugin(CustomDatePicker);
The method 'refresh' of the custom binder is triggered when a view-model changes, so data can flow from the view-model to the widget. It works well.
But I have problem with binding from the widget to the view-model (reverse flow).
At first I thought that the change in the datepicker trigger 'change' method in 'customValue' binder, but it doesn't.
CustomDatePicker.onChange method is triggered, but inside it the view-model is out of scope, so view-model can't be set.
My question is, how to update the view-model, when value of the widget is changed?
Thank for advice.
Only for illustration widget is initialized like this:
<input
data-role="datepickercustom"
data-bind="customValue: data"
data-format="dd.MM.yyyy" />
Kendo doesn't automatically setup the call to the change function in the binding. You will need to bind the change function to the change event of the widget yourself.
kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
var that = this;
$(widget.element).on('change', function () {
that.change();
});
},
.
.
.
change: function() {
// this method will now be triggered
debugger;
}
});
Be sure to follow the widget binding pattern (widget, bindings, options) not (element, binding, options).
It doesn't seem you need to extend the DatePicker widget, unless you need to implement other behaviors separate from updating the view model.
Related
I need to edit/remove a single event of the callendar, but with my current code, the update/remove afects all events inside the calendar.
Update Attempt:
$('#btn').click(function(){
var evento = $('#calendario').fullCalendar('clientEvents', function(event){
return event.className == 8;
});
evento[0].backgroundColor = "red";
$('#calendario').fullCalendar('updateEvent', evento[0]);
});
It changes the background color of all events. Also, it changes the events title, all to the same (The one with that ClassName).
Remove Attempt:
$('#btn').click(function(){
$('#calendario').fullCalendar('removeEvents', function(event){
return event.className = 8;
});
});
Also, this method removes ALL events.
How may I target a single event ?
UPDATE
Just found the problem:
Even if I target only that specific event with that specific className, this method updateEvent, will update ALL EVENTS THAT SHARE THE SAME ID. Why?
I don't think it's supposed to happen.
You are right in that you should be able to target events using a filter.
When you attempt to remove the event you are using the assignment operator rather than the equals operator. By changing that, your filter should then return true for removing the event with that class.
The following code worked for adding a class to one event and then removing the event using the class.
eventRender: function (event, element) {
if (event.id === 628) {
event.className = "Test";
}
},
eventClick: function (event, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', function (event) {
return event.className === "Test";
});
}
When is it safe to call the find(...) method on a ractive instance and be guaranteed that the template has been rendered and the DOM elements are available?
Background:
I'm new to RactiveJS, building my first application with it. I've been instantiating Ractive instances and then calling methods like find() on those instances to access elements rendered from my templates. Something like this:
var ractive = new Ractive({ el: ..., template: ..., data: ..., etc });
var element = ractive.find('.some-template-element');
This has been working fine so far, but I'm wondering whether I might have a race condition here because of the fact that ractive seems to render templates asynchronously. Is it safe to write code like the above or do I need to instead move everything into callbacks like this?
ractive.on('complete', function() {
var element = ractive.find('.some-template-element');
});
Too Much Information:
In practice, of course, what I'm doing is more complicated than this simple pseudo-code. I'm creating 'widgets' that use Ractive as an internal implementation detail. Right now, I create those widgets and then start calling methods on them. But if the Ractive methods aren't ready to call right away, I'll need to restructure my widgets to expose callbacks/promises that get called once I know my ractives have been created and are ready for use.
I haven't been able to find details in the RactiveJS documentation that explain when it's safe to call the various functions on Ractive, but I'm hoping I've just missed something.
Assuming you've provided an el option, rendering happens synchronously with the new Ractive instantiation.
While you can subscribe via ractive.on( 'event', ... ), it is often handy and cognitively easier to use the onevent options:
var log = [];
var r = new Ractive({
el: document.body,
template: '#template',
data: {
log: log
},
components: {
'child-component': Ractive.extend({
template: '<span>child</span>',
oninit: function() {
log.push('child component init');
},
onrender: function() {
var span = this.find('span');
log.push('child component render find span:' + !!span);
},
oncomplete: function() {
log.push('child component complete');
}
})
},
oninit: function() {
log.push('parent view init');
},
onrender: function() {
var div = this.find('div'),
span = this.find('span');
log.push('parent component render, find div: ' + !!div + ' find span: ' + !!span);
},
oncomplete: function() {
log.push('parent component complete');
}
});
// these won't fire becasue they already happened!
r.on('init', function() {
log.push('view on("init"...)');
});
r.on('render', function() {
log.push('view on("render"...)');
});
// this will fire because complete is always async.
r.on('complete', function() {
log.push('view on("complete"...)');
});
<script src='//cdn.jsdelivr.net/ractive/0.7.3/ractive-legacy.min.js'></script>
<script src='//cdn.jsdelivr.net/ractive.transitions-fade/0.2.1/ractive-transitions-fade.min.js'></script>
<script id='template' type='text/ractive'>
<div intro='fade'>main view</div>
<child-component/>{{#log}}
<li>{{.}} {{/}}
</script>
I'm creating a plugin that adds an option to the native WP gallery.
When a new gallery is created (clicking the "Create Gallery" button in the media popup), a 'select' element is added, and I have a backbone event listening for the 'change' event of this 'select'.
However, I only want to listen for the change event when the gallery is being newly created, rather than when editing an existing gallery.
My code so far is:
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
events: function() {
var the_events = {};
//NEED TO GET STATE (ie, 'creating gallery for first time' rather than 'edit gallery'....
var is_create_gallery = true;
//IF WE'RE EDITING, SET IT TO FALSE
//--here--
if (is_create_gallery) {
_.extend( the_events, { 'change select[data-setting="gallerytype"]' : 'gallerytypechanged' } );
}
return the_events;
},
gallerytypechanged: function( e ){
e.preventDefault();
var self = this;
var gallery_type = jQuery( e.currentTarget ).val();
if( gallery_type != 'native' ){
self.update.apply( self, ['gallerytype'] );
}
return self;
},
template: function(view) {
return wp.media.template('gallery-settings')(view) + wp.media.template('gallery-type')(view);
},
});
Basically the --here-- code should be a check to determine whether we're editing an existing gallery, or creating a new one.
Does anybody know where to check which state we're in?
Thanks!
I assume you can detect the state of the gallery outside of your Backbone View.
You could set the is_create_gallery state when initializing the backbone view, then call your view constructor with the custom argument:
var newGallery = // determine the gallery state
var view = new wp.media.view.Settings.Gallery({newGallery: newGallery});
You can access the passed argument in your initialize function like this:
initialize: function (options) {
if (options.newGallery) {
_.extend(this.events, {
'change select[data-setting="gallerytype"]' : 'gallerytypechanged'
});
}
}
Since your events map will be either empty or contain one event, I would remove the events key completely and do the events initialization from initialize.
I'm using the following code in my view to fetch my collection from the server:
initialize: function () {
_this = this;
this.collection.fetch({
success : function(collection, response) {
_.each(response, function(i){
var todo = new TodosModel({
id: i.id,
content: i.content,
completed: i.completed
});
// Add to collection
_this.collection.add(todo);
// Render
_this.render(todo);
});
},
error : function(collection, response) {
console.log('ERROR GETTING COLLECTION!');
}
});
},
Which seems to work - here's the output from my server:
{
"0": {
"id": 1,
"content": "one",
"completed": false
},
"3": {
"id": 4,
"content": "two",
"completed": true
},
"4": {
"id": 5,
"content": "tester",
"completed": false
}
}
Except for the fact that if I log out my collection there is a null entry in the first position:
Which then causes issues as if I add an item it takes the ID of the last element. I'm new to backbone and am hoping I'm just missing something simple.
Here's my crack at a quick run through of your code. I haven't tested anything so there might be typos. I'm still not sure where the stray empty model is coming from but if you restructure your application as outlined below, I suspect the problem will go away.
The model and collection look okay so let us have a look at your view.
el: $('#todos'),
listBlock: $('#todos-list'),
newTodoField: $('#add input'),
//...
template: $('#todo-template').html(),
//...
events: { /* ... */ },
These should be okay but you need to ensure that all those elements are in the DOM when your view "class" is loaded. Usually you'd compile the template once:
template: _.template($('#todo-template').html()),
and then just use this.template as a function to get your HTML. I'll assume that template is a compiled template function below.
initialize: function () {
_this = this;
You have an accidental global variable here, this can cause interesting bugs. You want to say var _this = this;.
this.el = $(this.el);
Backbone already gives you a jQuery'd version of el in $el so you don't need to do this, just use this.$el.
this.collection.fetch({
success : function(collection, response) {
_.each(response, function(i) {
var todo = new TodosModel({ /* ... */ });
// Add to collection
_this.collection.add(todo);
// Render
_this.render(todo);
});
},
//...
The collection's fetch will add the models to the collection before the success handler is called so you don't have to create new models or add anything to the collection. Generally the render method renders the whole thing rather than rendering just one piece and you bind the view's render to the collection's "reset" event; the fetch call will trigger a "reset" event when it has fetched so the usual pattern looks like this:
initialize: function() {
// So we don't have to worry about the context. Do this before you
// use `render` or you'll have reference problems.
_.bindAll(this, 'render');
// Trigger a call to render when the collection has some stuff.
this.collection.on('reset', this.render);
// And go get the stuff we want. You can put your `error` callback in
// here if you want it, wanting it is a good idea.
this.collection.fetch();
}
Now for render:
render: function (todo) {
var templ = _.template(this.template);
this.listBlock.append(templ({
id: todo.get('id'),
content: todo.get('content'),
completed: todo.get('completed')
}));
// Mark completed
if(todo.get('completed')) {
this.listBlock.children('li[data-id="'+todo.get('id')+'"]')
.addClass('todo-completed');
}
}
Normally this would be split into two pieces:
render to render the whole collection.
Another method, say renderOne, to render a single model. This also allows you to bind renderOne to the collection's "add" event.
So something like this would be typical:
render: function() {
// Clear it out so that we can start with a clean slate. This may or
// may not be what you want depending on the structure of your HTML.
// You might want `this.listBlock.empty()` instead.
this.$el.empty();
// Punt to `renderOne` for each item. You can use the second argument
// to get the right `this` or add `renderOne` to the `_.bindAll` list
// up in `initialize`.
this.collection.each(this.renderOne, this);
},
renderOne: function(todo) {
this.listBlock.append(
this.template({
todo: todo.toJSON()
})
)
// Mark completed
if(todo.get('completed')) {
this.listBlock.find('li[data-id="' + todo.id + '"]')
.addClass('todo-completed');
}
}
Notice the use of toJSON to supply data to the template. Backbone models and collections have a toJSON method to give you a simplified version of the data so you might as well use it. The model's id is available as an attribute so you don't have to use get to get it. You could (and probably should) push the todo-completed logic into the template, just a little
<% if(completed) { %>class="completed"<% } %>
in the right place should do the trick.
addTodo: function (e) {
//...
var todo = new TodosModel({
id: todoID,
content: todoContent,
completed: todoCompleted
});
this.render(todo);
todo.save();
_this.collection.add(todo);
You could bind renderOne to the collection's "add" event to take care of rendering the new model. Then use the save callbacks to finish it off:
var _this = this;
var todo = new TodosModel({ /* ... */ });
todo.save({}, {
wait: true,
success: function(model, response) {
// Let the events deal with rendering...
_this.collection.add(model);
}
});
Again, an error callback on the save might be nice.
completeTodo: function (e) {
//...
todo.save({
completed: todoCompleted
});
}
The save call here will trigger a 'change:completed' event so you could bind to that to adjust the HTML.
removeTodo: function (e) {
//...
}
The destroy call will trigger a "destroy" event on the model and on the collection:
Any event that is triggered on a model in a collection will also
be triggered on the collection directly, for convenience. This
allows you to listen for changes to specific attributes in any model
in a collection, [...]
So you could listen for "destroy" events on the collection and use those to remove the TODO from the display. And destroying the model should remove it from the collection without your intervention.
printColl: function () {
this.collection.each(function (todo) {
console.log('ID: '+todo.get('id')+' | CONTENT: '+todo.get('content')+' | COMPLETED: '+todo.get('completed'));
});
}
You could just console.log(this.collection.toJSON()) instead,
you'd have to click around a little to open up the stuff in the
console but you wouldn't miss anything that way.
All the event binding for the collection would take place in your
view's initialize method. If you're going to remove the view then
you'd want to override the remove to unbind from the collection
to prevent memory leaks:
remove: function() {
// Call this.collection.off(...) to undo all the bindings from
// `initialize`.
//...
// Then do what the default `remove` does.
this.$el.remove()
}
You could also use a separate view for each TODO item but that might be overkill for something simple.
I have a view that render itself from a Collection:
render: function() {
$(this.el).html(JST['templates/menu']({collection: this.collection }));
$('#nav').html(this.el);
}
In the view initializer, i bind the add event of the collection on the render function of the view:
initialize: function() {
this.render();
var self = this;
this.collection.bind("add", function(event){
self.render();
});
}
elsewhere in the application, I add an item to the collection.
bookSubscription_collection.add(model);
The problem with that code is, if I add a new item to the collection, then all the items in the collection are re-rendered.
Is there a way to add a new item to a collection without re-render all the other items, but just render the new item?
This a simplified version of how I'm doing it. reset adds all the models to the UI and add adds a single model to the UI. addAll basically has a loop that calls addOne for each model. It could probably be optimized better but it works well enough.
initialize: function() {
_.bindAll(this, 'render', 'addOne', 'addAll');
leads.bind('add', this.addOne, this);
leads.bind('reset', this.addAll, this);
},
render: function() {
this.addAll();
return this;
},
addOne: function(model) {
// add the model to HTML
},
addAll: function(options) {
leads.each(this.addOne);
return this;
}
Instead of binding the collection's add event to the render function, bind it to some other function that accepts the model that was added, and modifies the DOM with data from the model that was added.
abraham wrote a good example. Ive been also using it like this
initialize: ->
self = #
#model.bind "add", (task) ->
$(self.el).append new app.TaskIndexItemView(model: task).render().el
but i think the addOne is better solution