gun.js 中的两种不同形式
Two different forms in gun.js
已经编码了几个月并且是 gun.js 的新手，已经玩了好几天的待办事项示例并且似乎无法弄清楚如何创建两个不同步待办事项和放置的单独表单他们在彼此的名单中。下面是完全没有 todos 的代码，如果你能看一下，我将不胜感激。
<html>
<body>
<h1>Todos</h1>
<div id="div1"><div/>
<div id="div2"><div/>
<form id="form1"><input id="input1"><button>Add</button></form>
<form id="form2"><input id="input2"><button>Add</button></form>
<!-- Load GUN itself. -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Load jQuery to help make things a bit easier. -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form1 element.
var form1 = $('form1')
// Listen for submits of the form1.
form1.on('submit', function (event) {
// Get the input1 element.
var input1 = form1.find('input1')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input1.val()})
// Clear the input1 element, so the user is free to enter more todos.
input1.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('ul')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- script for the second form below -->
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form2 element.
var form2 = $('form2')
// Listen for submits of the form2.
form2.on('submit', function (event) {
// Get the input2 element.
var input2 = form2.find('input2')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input2.val()})
// Clear the input2 element, so the user is free to enter more todos.
input2.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('ul')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- Just some minimal styling. -->
<style>
ul { padding: 0; }
li { display: flex; }
li span { width: 150px; word-break: break-all; }
img { height: 20px; margin-left: 8px; cursor: pointer; }
input { width: 150px; margin-right: 8px; }
input[type='checkbox'] { width: auto; }
.div1{
position: absolute;
margin-left: 10px;
}
.div1{
position: absolute;
margin-left: 200px;
}
</style>
</body>
</html>
感谢帮助
您的代码似乎大部分都没有问题，我认为问题出在 jQuery 中的 selectors。这是工作代码：https://codesandbox.io/s/vigorous-field-pezjw?file=/index.html
我改变了什么：
您想将待办事项附加到页面中的列表 (.appendTo('ul'))，但标记中没有 ul。我将 div1 和 div2 更改为 <ul id=list1> 和 <ul id=list2> 并将散列添加到 select 或
然后 selectors 表格无法正常工作。元素 ID 在 HTML 文档中成为全局变量，但我不认为你可以 select 它们与 jQuery 没有散列 - 因此具有 ID (<div id=watermelon>) 的元素将是select 由 #watermelon 编辑的方式与通过 class 名称和 . 获取元素的方式相同，例如$('.icecream').
我对 form.find('input1') 做了同样的事情 - 它只需要将 # 添加到 selector 就可以了。
代码如下：
<h1>Todos</h1>
<ul id="list1"><ul/>
<ul id="list2"><ul/>
<form id="form1"><input id="input1"><button>Add</button></form>
<form id="form2"><input id="input2"><button>Add</button></form>
<!-- Load GUN itself. -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Load jQuery to help make things a bit easier. -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form1 element.
var form1 = $('#form1')
// Listen for submits of the form1.
form1.on('submit', function (event) {
// Get the input1 element.
var input1 = form1.find('#input1')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input1.val()})
// Clear the input1 element, so the user is free to enter more todos.
input1.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
console.log(todo, id)
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('#list1')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- script for the second form below -->
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form2 element.
var form2 = $('#form2')
// Listen for submits of the form2.
form2.on('submit', function (event) {
// Get the input2 element.
var input2 = form2.find('#input2')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input2.val()})
// Clear the input2 element, so the user is free to enter more todos.
input2.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('#list2')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- Just some minimal styling. -->
<style>
ul { padding: 0; }
li { display: flex; }
li span { width: 150px; word-break: break-all; }
img { height: 20px; margin-left: 8px; cursor: pointer; }
input { width: 150px; margin-right: 8px; }
input[type='checkbox'] { width: auto; }
.div1{
position: absolute;
margin-left: 10px;
}
.div1{
position: absolute;
margin-left: 200px;
}
</style>
希望对您有所帮助
已经编码了几个月并且是 gun.js 的新手，已经玩了好几天的待办事项示例并且似乎无法弄清楚如何创建两个不同步待办事项和放置的单独表单他们在彼此的名单中。下面是完全没有 todos 的代码，如果你能看一下，我将不胜感激。
<html>
<body>
<h1>Todos</h1>
<div id="div1"><div/>
<div id="div2"><div/>
<form id="form1"><input id="input1"><button>Add</button></form>
<form id="form2"><input id="input2"><button>Add</button></form>
<!-- Load GUN itself. -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Load jQuery to help make things a bit easier. -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form1 element.
var form1 = $('form1')
// Listen for submits of the form1.
form1.on('submit', function (event) {
// Get the input1 element.
var input1 = form1.find('input1')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input1.val()})
// Clear the input1 element, so the user is free to enter more todos.
input1.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('ul')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- script for the second form below -->
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form2 element.
var form2 = $('form2')
// Listen for submits of the form2.
form2.on('submit', function (event) {
// Get the input2 element.
var input2 = form2.find('input2')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input2.val()})
// Clear the input2 element, so the user is free to enter more todos.
input2.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('ul')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- Just some minimal styling. -->
<style>
ul { padding: 0; }
li { display: flex; }
li span { width: 150px; word-break: break-all; }
img { height: 20px; margin-left: 8px; cursor: pointer; }
input { width: 150px; margin-right: 8px; }
input[type='checkbox'] { width: auto; }
.div1{
position: absolute;
margin-left: 10px;
}
.div1{
position: absolute;
margin-left: 200px;
}
</style>
</body>
</html>
感谢帮助
您的代码似乎大部分都没有问题，我认为问题出在 jQuery 中的 selectors。这是工作代码：https://codesandbox.io/s/vigorous-field-pezjw?file=/index.html
我改变了什么：
您想将待办事项附加到页面中的列表 (
.appendTo('ul'))，但标记中没有ul。我将div1和div2更改为<ul id=list1>和<ul id=list2>并将散列添加到 select 或然后 selectors 表格无法正常工作。元素 ID 在 HTML 文档中成为全局变量，但我不认为你可以 select 它们与 jQuery 没有散列 - 因此具有 ID (
<div id=watermelon>) 的元素将是select 由#watermelon编辑的方式与通过 class 名称和.获取元素的方式相同，例如$('.icecream').我对
form.find('input1')做了同样的事情 - 它只需要将#添加到 selector 就可以了。
代码如下：
<h1>Todos</h1>
<ul id="list1"><ul/>
<ul id="list2"><ul/>
<form id="form1"><input id="input1"><button>Add</button></form>
<form id="form2"><input id="input2"><button>Add</button></form>
<!-- Load GUN itself. -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<!-- Load jQuery to help make things a bit easier. -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form1 element.
var form1 = $('#form1')
// Listen for submits of the form1.
form1.on('submit', function (event) {
// Get the input1 element.
var input1 = form1.find('#input1')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input1.val()})
// Clear the input1 element, so the user is free to enter more todos.
input1.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
console.log(todo, id)
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('#list1')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- script for the second form below -->
<script>
// Initialize GUN and tell it we will be storing all data under the key 'todos'.
var todos = Gun().get('todos')
// Get the form2 element.
var form2 = $('#form2')
// Listen for submits of the form2.
form2.on('submit', function (event) {
// Get the input2 element.
var input2 = form2.find('#input2')
// Tell GUN to store an object,
// with as title the value of the input element.
todos.set({title: input2.val()})
// Clear the input2 element, so the user is free to enter more todos.
input2.val('')
// Prevent default form submit handling.
event.preventDefault()
})
// Listen to any changes made to the GUN todos list.
// This will be triggered each time the list changes.
// And because of how GUN works, sometimes even multiple times per change.
todos.map().on(function (todo, id) {
// Check if the todo element already exists.
// This can happen because GUN sometimes sends mulitple change events for the same item.
var li = $('#' + id)
// Does is not yet exist?
if (!li.get(0)) {
// Create it.
// Set the id to the GUN id of the item.
// GUN automatically creates id's for all items.
// Finally set the new todo element to the end of the list.
li = $('<li>').attr('id', id).appendTo('#list2')
}
// Does the GUN item contain any data?
// (It sends null if it was removed from GUN.)
if (todo) {
// Create an element with the title of the GUN item in it.
var html = todo.title
// Set it to the element.
li.html(html)
}
})
</script>
<!-- Just some minimal styling. -->
<style>
ul { padding: 0; }
li { display: flex; }
li span { width: 150px; word-break: break-all; }
img { height: 20px; margin-left: 8px; cursor: pointer; }
input { width: 150px; margin-right: 8px; }
input[type='checkbox'] { width: auto; }
.div1{
position: absolute;
margin-left: 10px;
}
.div1{
position: absolute;
margin-left: 200px;
}
</style>
希望对您有所帮助