I written a function, it will trigger whenever model attribute change just like in the following way.
modelEvents:{
"change:Name":"callback1"
},
callback1:function(){
console.log("This is testing");
}
Initially I set model.set("Name","hi") so automatically callback1 was invoked. Again If I set the same value into model, callback1 not triggering because model attribute not modified. so For this every time I am doing in the following.
model.set({"Name":""},{silent:true});
model.set({"Name":"hi"});
If I do like above it's working fine, but I want to know is there any option(like silent) to forcefully invoke callback.
Thanks.
If you want to go the route of passing an option then the only way to accomplish this would be to override the set method with something like this in your Model, although i haven't done testing on this to make sure it would not produce unexpected results.
set: function(key, val, options) {
//call the origonal set so everything works as normal
Backbone.Model.prototype.set.call(this, key, val, options);
current = this.attributes, prev = this._previousAttributes;
if (typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
options || (options = {});
//new option to always trigger the change on an attribute
if (options.loud) {
for (var key in attrs) {
//if the value is the same as before trigger the change
//otherwise backbone will have already triggered the chage
if (_.isEqual(prev[key] , attrs[key])) {
this.trigger('change:' + key, this, current[key], options);
}
}
}
}
then to make use of it call the normal set but pass loud: true
this.model.set({
name: "Hi"
}, {
loud: true
});
here a fiddle that makes use of it http://jsfiddle.net/leighking2/ktvj0kgp/
To show that the event is triggered even when the attribute is the same i have added an attribute called renders to show how many times it has been called.
Why don't you use Model.hasChanged for this? basically it will listen for changes in an attribute.
Take a look here.
http://backbonejs.org/#Model-hasChanged
Hope it helps
Related
Hy I wrote a quick and dirty list ui in js and html that can be filtered:
https://jsfiddle.net/maxbit89/2jab4fa4/
So the usage of this looks like this (Fiddle line: 96):
var list = new ui_list(document.body, 200, 300, "Test");
var encoder = function(dom, value) {
console.log("begin encoding");
console.log(value)
dom.innerHTML = value.n;
}
list.add({'n': 1}, function() {
this.value.n++;
console.log(this.value.n);
// this.value = this.value;
}, encoder);
So what this basicaly does is create a List and adds a Element to it that has an Object: {'n': 1} as a value and a onClickHandler(second parameter on list.add) wich should increase the value by 1 (fiddle line: 104)
But it won't do this untill you uncomment the line 106 in the fiddle.
(Tested with FireFox 50.1.0, and Edge Browser)
Has any body an idea why js behaves like this?
In a much simplier example this works just fine:
var myObj= {
'onvalueChange' : function() {
console.log('value changed');
},
'print' : function() {
console.log('value:');
console.log(this.value);
console.log(this.value.n);
}
};
Object.defineProperty(myObj, "value", {
get: function() { return this._value; },
set: function(value) {
this.onvalueChange();
this._value = value;
}
});
myObj.value = {'n' : 1};
myObj.value.n++;
myObj.print();
First you have the setter defined like this:
set: function (value) {
this.encoder(this, value);
this._value = value;
}
that means that every time the value is set, the encoder will be called with the new value to update the equivalent DOM element.
But then inside the event listener function you have:
function() {
this.value.n++;
console.log(this.value.n);
//this.value = this.value;
}
where you think that this.value.n++ is setting the value (means it calls the setter which means the encoder will be called to update the DOM element). But it's not true. this.value.n++ is actually calling the getter. To explain more this:
this.value.n++;
is the same as:
var t = this.value; // call the getter
t.n++; // neither call the getter nor the setter. It just uses the reference (to the object) returned by the getter to set n
So, when you uncomment the line this.value = this.value;, the setter gets called, and the encoder gets called to update the DOM element.
So to fix the issue you have to either:
Make a call inside the getter to the encoder as you did for the setter (but this solution is very hacky as it will update the DOM element on every getter call even if nothing is being set).
Change this this.value.n++; to actually call the setter like: this.value = {n: this.value.n + 1}; (but this is hacky too as if value has a lot of key-value pairs then you have to enlist them all here just to set n).
Call the encoder inside the event listener which will be the best way to do it (or if you don't want to pass the parameters to it make another function (for example this.callEncoder()) that will call it and [you] call the new function instead inside the event listener).
I know this problem have been discussed several times, but I could not find an answer to one of its many aspects, that I'll try to explain here.
Model save() keeps sync between client and server. Backbone.js pushes you to use it in one of these 2 ways (afaik):
Save all the items of a model: this will send everything to the
server, even attributes used only on the client side and attributes
that have not been changed. This is the default for new models (when
model.isNew() returns true).
Save with patch:true will only send changed attributes of the
model to the server. In Backbone, it means that ONLY the
attributes returned by changedAttributes() will be sent.
The point is that changedAttributes() ONLY returns the changes since the LAST change event. This is useful for models that are not updating all the time, and actually can afford to automatically make an ajax request on any change.
But if you have a model that is constantly changing (for example a code/text editor or an element that can be dragged/dropped and its position should be tracked), you cannot just save at every single change event. You need to save at time intervals, ALL the changed attributes since the last time you called save().
Do you think Backbone.js actually provides a good support for this kind of synchronization? Does Bakcbone.js track changes since last save() (and not only since last change event)? Or you have to do it "manyally"?
You'll have to extend backbone models with your own base model.
var BaseModel = Backbone.Model.extend({
save: function(key, val, options){
var attrs
if (key == null || typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
attrs = _.extend(this.unsaved || {}, attrs);
this.unsaved = {};
return Backbone.Model.prototype.save.call(this, attrs, options);
},
set: function(key, val, options) {
var attr
if (key == null) return this;
if (typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
this.unsaved = _.extend(this.unsaved || {}, attrs);
return Backbone.Model.prototype.save.call(this, attrs, options);
}
});
Totally untested code, but should be very close to what you need to do.
Is there a way to update an observable when the <input> value is changed, but programatically, i.e. by Javascript?
Here is a jsfiddle of this use case that I am not able to make it work: http://jsfiddle.net/qYXdJ/
As you see when the "Update input value by Javascript" link is clicked the observable is obviously not updated, since it is not reflected in the <span>
If you absolutely can't modify the observable directly (which is the best way), you can trigger the "onchange" event (which Knockout uses internally). With jQuery, it's a simple matter:
$('#update').on('click', function() {
$('#input2').val('New Value').trigger('change');
});
If you don't want to use jQuery for whatever reason, have a look at this question.
As cyanfish pointed out the correct way is to update the observable.
If the problem is your code doesn't have access to the observable, for example you're writing a bookmarklet to automatically fill out a form, then you can gain access to the observable like this:
function setValue(input, value) {
var bindingsString = input.getAttribute('data-bind');
if (bindingsString) {
var bindings = ko.bindingProvider.instance.parseBindingsString(bindingsString, ko.contextFor(input), input);
if (bindings.value) {
bindings.value(value);
} else if (bindings.checked) {
bindings.checked(value);
} else {
input.value = value;
}
} else {
input.value = value;
}
}
You have to change the viewModel 'name' property instead of input field value, because it's observable, and any changes on the property will be reflected to all binded html elements.
var viewModel = {
name: ko.observable()
};
ko.applyBindings(viewModel);
document.getElementById('update').onclick = function(){
viewModel.name('New Value');
//document.getElementById('input2').value = 'New Value';
}
Story:
I have a lot of properties that needs to be set. Since they have similarities I choose to read out the class the inputbox is part of as property name.
Problem:
A dynamic property of an object can be set, just like an associative array. So I could do
var customattribute = this.$el.parents('div').attr('id');
var value = $(e.currentTarget()).val();
this.model.attributes[customattribute] = value;
But this wouldn't trigger a change event of the model. I could manually trigger a change event, but this wouldn't update this.model.changedAttributes(), I need to set only the changed attribute, not every attribute.
This of course doesn't work either:
this.model.set(customattribute: value);
So how would I handle this problem?
I have ALOT (200+) attributes that can be set, I wouldn't like to make separate eventlisteners for every attribute unless thats the only way.
Code:
var Display = Backbone.View.extend({
className: 'display',
events: {
'slide .slider' : 'sliderHandler'
},
initialize: function(){
_.bindAll(this, 'render', 'sliderHandler','update');
this.model.on('change',this.update, this);
},
render: function(){
this.$el.html(_.template(html, {}));
this.$('.slider').slider();
return this;
},
sliderHandler: function(e){
var slider = $(e.currentTarget);
var property = slider.parents('div').attr('id');
var value = slider.slider('value');
this.model.attributes[property] = value;
},
update: function(){
console.log(this.model.changedAttributes());
//get changed attribute + value here
},
});
Edit:
The two answers below solved it. Map the attributes to an object and give that to Backbone. Also I found another solution. Instead of an object, model.set() also accepts an array.
model.set(customattribute, value, customattribute2, value2);
I'm not sure that I fully understand your problem, but:
If you want to update an attribute, just:
this.model.set({
customattribute: value
});
If you want that the setting not trigger an event, you could pass a silent option, like this:
this.model.set({
customattribute: value
}, {silent:true});
I hope it helps you.
UPDATED:
Another way:
var map = {};
map[customattribute] = value;
this.model.set(map);
You need to do this
var attributeName = this.$el.parents('div').attr('id');
var value = $(e.currentTarget()).val();
var attribute = {};
attribute[attributeName] = value;
this.model.set(attribute);
if attribute was "test" and value 'value' it would be the same as
this.model.set({test: 'value'});
which is what correctly sets the attribute and propagates to your view thanks to model change event
As of Backbone 0.9.0 (Jan. 30, 2012), model.set (source) accepts a key, a value, and an options object.
this.model.set(attributeName, value, { silent: true });
is equivalent to
var attr = {};
attr[attributeName] = value;
this.model.set(attr, { silent: true });
I've been implementing a form of a publisher/subscriber design pattern in jQuery. I'm basically building classes in Javascript utilizing CoffeeScript that serve as components on my page. i.e. Navigation, DataList, etc.
Instead of having DOM elements fire events, I have instances of these classes that use trigger on themselves to send custom events. These instances can then listen to each other and can update the DOM elements they own accordingly based on the changes in each others behavior!
I know this works as I have one of my components dispatching a custom event properly. However, I've ran into a snag. I've created another component and for the life of me I cannot figure out why it's event is not being fired.
This is the implementation of my class:
window.List = (function() {
List = function(element, settings) {
var _a, _b, _c;
this.list = $(element);
this.settings = jQuery.extend(List.DEFAULTS, settings);
this.links = this.list.find(this.settings.link_selector);
this.links.selectable();
_b = [SelectableEvent.COMPLETED, SelectableEvent.UNDONE, SelectableEvent.SELECTED, SelectableEvent.DESELECTED];
for (_a = 0, _c = _b.length; _a < _c; _a++) {
(function() {
var event_type = _b[_a];
return this.links.bind(event_type, __bind(function(event, selectable_event) {
return this.dispatch(selectable_event);
}, this));
}).call(this);
}
return this;
};
List.DEFAULTS = {
link_selector: "a",
completed_selector: ".completed"
};
List.prototype.change = function(mode, previous_mode) {
if (mode !== this.mode) {
this.mode = mode;
if (previous_mode) {
this.list.removeClass(previous_mode);
}
return this.list.addClass(this.mode);
}
};
List.prototype.length = function() {
return this.links.length;
};
List.prototype.remaining = function() {
return this.length() - this.list.find(this.settings.completed_selector).length;
};
List.prototype.dispatch = function(selectable_event) {
$(this).trigger(selectable_event.type, selectable_event);
return alert(selectable_event.type);
};
return List;
}).call(this);
Pay attention to:
List.prototype.dispatch = function(selectable_event) {
$(this).trigger(selectable_event.type, selectable_event);
return alert(selectable_event.type);
};
This code is triggered properly and returns the expected event type via an alert. But before the alert it is expected to trigger a custom event on itself. This is where I'm encountering my problem.
$(document).ready(function() {
var list_change_handler, todo_list;
todo_list = new List("ul.tasks");
list_change_handler = function(event, selectable_event) {
return alert("Hurray!");
};
$(todo_list).bind(SelectableEvent.COMPLETED, list_change_handler);
$(todo_list).bind(SelectableEvent.UNDONE, list_change_handler);
$(todo_list).bind(SelectableEvent.SELECTED, list_change_handler);
$(todo_list).bind(SelectableEvent.DESELECTED, list_change_handler);
}
You see here the alert "Hurray" is what I want to fire but unfortunately I am having no luck here. Ironically I've done the exact same thing with another class implemented the same way dispatching a custom event and the listener is receiving it just fine. Any ideas on why this wouldn't work?
Update:
Per discussing in the comments, it looks like Logging "this" in console returns the JS Object representing the class. But logging "$(this)" returns an empty jQuery object, thus trigger would never be fired. Any thoughts on why $(this) is coming up empty when "this" is accurately returning the instance of the class?
I found out that jQuery could not index my object because the class implemented it's own version of a jQuery method. In this case, length(). Renaming the length() method to total() resolved the problem completely and any instance of the class can successfully trigger events.