Comments (28)
I will try to provide a workaround.
from icheck.
thank u very much
from icheck.
Just curious if you have a workaround for this issue yet? Thanks for your wonderful module!
from icheck.
Any news for this issue? Thanks for great plugin.
from icheck.
This's not just about Knockout.
iCheck should be integrated into other frameworks too, like Angular, Backbone and Ember.
from icheck.
@fronteed +1 for other frame works specially Angular
from icheck.
Hello,
Thank you for the great plug-in. Is there any workaround about the knockout issue ?
from icheck.
I'm rewriting plugin nearly from scratch for a better performance, solution will come after I finish this task.
from icheck.
👍 for Angular integration
from icheck.
Ember.js++
from icheck.
for anyone who is struggling with integration with knockout, here is my solution and it worked for me. You may define a custom binding like below and handle the model inside oninit method,
ko.bindingHandlers.CustomBinding = {
init: function (element, valueAccessor) {
$(element).iCheck({ radioClass: 'iradio_square-blue' });
$(element).on('ifChanged', function () {
var observable = valueAccessor();
observable.checked(this.checked);
});
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
}
};
from icheck.
Thanks @chamweer.
Which version do you use in this code (1.x or 2.x)?
23.01.2014, â 21:48, chamweer [email protected] íàïèñàë(à):
for anyone who is struggling with integration with iCheck, here is my solution and it worked for me. You may define a custom binding like below and handle the model oninit,
ko.bindingHandlers.CustomBinding = {
init: function (element, valueAccessor) {$(element).iCheck({ radioClass: 'iradio_square-blue' }); $(element).on('ifChanged', function () { var observable = valueAccessor(); observable.checked(this.checked); }); }, update: function (element, valueAccessor) { var observable = valueAccessor(); }
};
—
Reply to this email directly or view it on GitHub.
from icheck.
it's iCheck v1.0.1. Please note that i think there is no issue with iCheck plugin but what you need to know is how you integrate the same with knockout js. Hope the code i have submitted will help someone (y)
from icheck.
Try to use 2.x version https://github.com/fronteed/iCheck/tree/2.x-beta
It's already tested on desktop and mobile browsers.
24.01.2014, â 7:22, chamweer [email protected] íàïèñàë(à):
it's iCheck v1.0.1
—
Reply to this email directly or view it on GitHub.
from icheck.
thanks, will try it out (y)
from icheck.
Version 2.0 (RC1 atm) is working great with Ember.js. Thank you!
from icheck.
@staticdreams do you use any extra code for ember.js intergration?
from icheck.
@fronteed , strangely none :)
Just a basic Ember.View with a few methods.
Ember.RadioButton = Ember.View.extend({
checked: false,
templateName: 'radioButton',
didInsertElement: function() {
this.$().icheck({
radioClass: 'iradio_square-blue'
});
},
change: function() {
Ember.run.once(this, this._updateElementValue);
},
_updateElementValue: function() {
var input = this.$('input:radio');
console.log(input.attr('value')) // <-- this outputs the actual input value (radio button)
}
});
from icheck.
I know this is an old issue, but using knockout 3.1.0 and icheck v1.0.2:
ko.bindingHandlers.iCheckBox = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $el = $(element);
var observable = valueAccessor();
$el.iCheck({
checkboxClass: 'icheckbox_square-red',
inheritClass: true
});
var enabled = allBindingsAccessor().enable();
if (enabled) {
$el.iCheck('enable');
}
else {
$el.iCheck('disable');
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$el.iCheck('destroy');
});
allBindingsAccessor().enable.subscribeChanged(function (newValue, oldValue) {
if (newValue != oldValue) {
$el.iCheck('update');
}
});
// ifChecked handles tabs and clicks
$el.on('ifChecked', function (e) {
observable(true);
});
$el.on('ifUnchecked', function (e) {
observable(false);
});
ko.bindingHandlers.iCheckBox.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This update handles both the reverting of values from cancelling edits, and the initial value setting.
var $el = $(element);
var value = ko.unwrap(valueAccessor());
if (value == true) {
$el.iCheck('check');
} else if (value == false || value == null || value == "") { // Handle clearing the value on reverts.
$el.iCheck('uncheck');
}
}
};
from icheck.
@staticdreams can you share the template for the RadioButton view?
from icheck.
@jccounihan can you show me the html example of this iCheckBox?
I was trying to make it work, but I could not. It says "undefined is not a function". Probably because I am not passing the 'allBindingsAccessor' parameter.
BTW I am using Icheck 1.0.2 and knockout 3.2.0
from icheck.
Hi @odiego, sorry my bad! In my original snippet there was no check to see if you were using the enable binding as well. I have fixed it in the sample below.
// Using ko 3.2.0 and iCheck 1.0.2
ko.bindingHandlers.iCheckBox = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $el = $(element);
var observable = valueAccessor();
$el.iCheck({
checkboxClass: 'icheckbox_flat-blue',
inheritClass: true
});
var enable = allBindingsAccessor().enable;
if (enable != undefined) {
if (enable()) {
$el.iCheck('enable');
}
else {
$el.iCheck('disable');
}
var enabledSubs = enable.subscribeChanged(function (newValue, oldValue) {
if (newValue != oldValue) {
$el.iCheck('update');
}
});
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
if (enabledSubs != null) {
enabledSubs.dispose();
enabledSubs = null;
}
$el.iCheck('destroy');
});
// ifChecked handles tabs and clicks
$el.on('ifChecked', function (e) {
observable(true);
});
$el.on('ifUnchecked', function (e) {
observable(false);
});
ko.bindingHandlers.iCheckBox.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This update handles both the reverting of values from cancelling edits, and the initial value setting.
var $el = $(element);
var value = ko.unwrap(valueAccessor());
if (value == true) {
$el.iCheck('check');
} else if (value == false || value == null || value == "") { // Handle clearing the value on reverts.
$el.iCheck('uncheck');
}
}
};
The sample also includes a reference to my subscribeChanged function, which was not included in the original post.
ko.subscribable.fn.subscribeChanged = function (callback) {
var that = this;
if (!that.previousValueSubscription) {
that.previousValueSubscription = this.subscribe(function (_oldValue) {
that.oldValue = _oldValue;
}, that, 'beforeChange');
}
var subscription = that.subscribe(function (latestValue) {
callback(latestValue, that.oldValue);
}, that);
var protoDispose = subscription.dispose;
subscription.dispose = function () {
if (protoDispose) {
protoDispose.call(this);
}
if (that.previousValueSubscription) {
that.previousValueSubscription.dispose();
}
delete that.oldValue;
}
return subscription;
};
The Html for the this is pretty simple
<div>
<label>
<input type="checkbox" data-bind="iCheckBox: SmokerCheckBox" />
<span class="icheck-label"> Is Smoker</span>
</label>
</div>
<div data-bind="text: ko.toJSON(vm)">
</div>
I have created a fiddle with all the code to demo.
from icheck.
Folks, I did two different versions for 'radios' and 'checkboxes'.
Both are very simple to do and work flawlessly.
For radio: (it will put the value from radio into the observable)
JS:
radioCheckedValue: ko.observable(),
ko.bindingHandlers.iCheckRadio = {
init: function (element, valueAccessor) {
$(element).iCheck({
radioClass: 'iradio_flat-orange',
increaseArea: '20%',
cursor: true
});
$(element).on('ifChanged', function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
}
};
HTML Code:
<input type="radio" name="iCheckRadio" data-bind="value: myValue, iCheckRadio: radioCheckedValue" /><span class="icheck-label" data-bind="text: myValue" />
For checkboxes (it will set true or false into the observable)
JS:
ko.bindingHandlers.iCheck = {
init: function (element, valueAccessor) {
$(element).iCheck({
checkboxClass: 'icheckbox_flat-orange',
increaseArea: '20%',
cursor: true
});
$(element).on('ifChanged', function () {
var observable = valueAccessor();
observable($(element)[0].checked);
});
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
}
};
HTML:
<input type="checkbox" name="iCheck" data-bind="value: myValue, iCheck: checkedValue" /><span class="icheck-label" data-bind="text: myValue" />
from icheck.
ko.bindingHandlers.iCheck = {
init: function (element, valueAccessor) {
$(element).iCheck({
checkboxClass: 'icheckbox_minimal-grey',
increaseArea: '10%'
});
$(element).on('ifChanged', function () {
var observable = valueAccessor();
observable($(element)[0].checked);
});
},
update: function (element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
if (value) {
$(element).iCheck('check');
} else {
$(element).iCheck('uncheck');
}
}
};
from icheck.
i have a problem with update model, but i fix it this way
didInsertElement: function(){
this.$().find('input').iCheck({
checkboxClass: 'icheckbox_flat-red'
});
this.$().find('input').on('ifToggled', function(){
$(this).trigger('change');
});
}
http://jsfiddle.net/bogdosarov/sctu1ds1/8/
from icheck.
FWIW I've just tried the icheck 2.0RC1 js file instead and updated the js call to
from icheck.
I am stuck ..trying to implement icheck with backbone ..but unable to listen to events.
Is there a way to identify the chceked and unchecked event in backbone
from icheck.
I'm getting TypeError: observable is not a function when trying to use ichecks and knockout the observable doesn't seem to match up right. In my case it's a dependent observable that is a bool called like so: iCheckBox: Thing().IsSomething
from icheck.
Related Issues (20)
- it can not be aligned horizontally in a td of table. HOT 1
- Not working with asp radiobuttonlist HOT 2
- iCheck disabled checked HOT 1
- Problems with ios 13 HOT 7
- Problem when going back then forward. HOT 2
- Mac Safari iCheck won't render HOT 4
- IPAD icheck- checkbox not working HOT 3
- iCheck library not compatible with JAWS screen reader for accessibility HOT 2
- checking checked state of check box gives flipped result HOT 1
- v1.0.3 not available on yarn install HOT 1
- Getting issues on touch screens with v1.0.3 HOT 1
- Custom data elements HOT 1
- iCheck is causing div collapse
- disable icheck in readonly
- iCheck in not working in Flutter - Android webviews HOT 1
- Docs website is down
- Checkbox does not work on mobile with Desktop Site mode HOT 4
- Icheck not working on mobile chrome that uses desktop site view enabled
- [Composer\Downloader\TransportException] file could not be downloaded, got redirect without Location (HTTP/1.1 300 Multiple Choices) HOT 18
- skins have invalid CSS that breaks the width of the iCheck
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from icheck.