Skip to content

Instantly share code, notes, and snippets.

@BenJanecke
Created October 6, 2022 22:15
Show Gist options
  • Save BenJanecke/0b038f089a82944d54b1cc597360d306 to your computer and use it in GitHub Desktop.
Save BenJanecke/0b038f089a82944d54b1cc597360d306 to your computer and use it in GitHub Desktop.
Contrived interactive component example
(function (window, $, Backbone, app, _) {
app.TodoItem = Backbone.View.extend({
tagName: "li",
template: _.template(
'<div class="view">' +
'<input class="toggle" type="checkbox" <%= completed ? "checked" : "" %>>' +
'<label><%- title %></label>' +
'<button class="destroy"></button>' +
'</div>' +
'<input class="edit" value="<%- title %>"></input>'
),
events: {
"click .toggle": "toggleDone",
"dblclick .view": "edit",
"click a.destroy": "clear",
"keypress .edit": "updateOnEnter",
"blur .edit": "close",
},
initialize: function () {
this.listenTo(this.model, "change", this.render);
this.listenTo(this.model, "destroy", this.remove);
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass("done", this.model.get("done"));
this.input = this.$(".edit");
return this;
},
toggleDone: function () {
this.model.toggle();
},
edit: function () {
this.$el.addClass("editing");
this.input.focus();
},
close: function () {
var value = this.input.val();
if (!value) {
this.clear();
} else {
this.model.save({ title: value });
this.$el.removeClass("editing");
}
},
updateOnEnter: function (e) {
if (e.keyCode == 13) this.close();
},
clear: function () {
this.model.destroy();
},
});
})(window, jQuery, Backbone, app, _);
import { memo, useCallback, useState } from "react";
export const TodoItem = memo(function TodoItem({ title, complete, update, destroy }) {
const [editing, setEditing] = useState(false);
const save = useCallback(
(e) => {
const [{ value }] = e.target.elements;
update({ value });
setEditing(false);
},
[update, setEditing]
);
const toggle = useCallback(() => update({ complete: !complete }), [update, complete]);
const open = useCallback(() => setEditing(true), [setEditing]);
if (editing) {
return (
<form onSubmit={save} onBlur={save}>
<input defaultValue={title} />
<button>save</button>
</form>
);
}
return (
<li onDoubleClick={open}>
<input type="checkbox" checked={complete} onChange={toggle} />
<label>{title}</label>
<button onClick={destroy}>x</button>
</li>
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment