Question

我没有寻找具体的例子，但更多的是我的流程是否合适。我正在制作一个幻想足球选秀应用程序，我有一张漂亮的球员桌子。我试图弄清楚如何让用户从表中选择一个玩家并起草它们。这就是我到目前为止的想法：

不是将表作为html返回，而是将每一行作为JS对象返回
点击一行后，使用播放器的ID
当填充隐藏表单时，启用选择按钮
提交表单时，使用js将玩家添加到用户的名单中并重新呈现桌面和玩家的名单。

这有意义吗？我将使用jquery，但我对JS的经验非常有限，所以我试图打破这个，以便我可以学习。

谢谢！

Answer 1

我认为你真的需要看看knockout.js（虽然angular.js是另一种选择）

让我们考虑一下你在机械上做什么。您有一个用户界面（UI），它是您的浏览器DOM。用户将与此进行交互。在此背后，您希望拥有的内容（尽管您尚未明确表达）是让用户做出选择时更新基础模型。

你可以从两个方面做到这一点。第一个全部JQuery＆amp;没有ViewModel是使用点击事件和监听器并手动收集数据，将其粘贴到表单中并通过AJAX发布。只要您的应用变得更加复杂，您就会在午餐盒中哭泣。

更好的方法是使用ViewModel - 业务对象的内存表示形式。根据玩家，分数，名册与表格，文本框等进行思考。魔法如何使用Knockout，您可以使用称为模型绑定的技术来装饰各种HTML元素（输入表单，标签等）。基本上，您说给定输入是ViewModel（VM）的给定成员的属性。这将删除您关注的所有底层管道，并且UI和VM保持同步。从那里，您可以使用Breeze.js来管理VM与Web服务器的通信。 Angular是另一种方法，虽然我还没有使用它。

现在你可能想知道＆＃34;我几乎不知道JQuery，为什么我需要跑出去学习另一个库，我想开始构建我的应用程序＆＃34;。好吧，JQuery是一个库，而Knockout则不是。这是一个框架。把框架想象成一个图书馆，但对你应该做什么有很强的意见。 Knockout也适用于JQuery，但你真的，真的，真的想要尽可能地限制你的DOM操作。

您也会找到很多教程。 http://learn.knockoutjs.com/#/?tutorial=intro

现在有些人可能会指出你的其他竞争框架的方向。你可能最终转向Angular，这是一个＆＃34;一切都在一个盒子＆＃34;方法，因为Knockout更像是一个单一的小马。但这并不是一个真正的弱点。淘汰赛做得很好，这就是你现在所做的事情。其他库可以很好地使用它，您可以在学习时添加它们，或者在学习和成长时迁移到Angular或其他任何其他库。

祝你好运！

Answer 2

如评论中所述，您应该使用AJAX（http://api.jquery.com/jquery.ajax/）将数据发送到服务器并更新您的表和名单。这样你就不必填写虚拟表格。您可以在表格行中添加data-player="playerId"并使用您的AJAX调用发送它。

您可以使用：

<tr data-id="foo" onclick="selectPlayer(this)">
  ..
</tr>

以下代码作为大纲：

function selectPlayer(element) {
  $.ajax({
    type: 'POST',
    url: '...',
    data: { playerId: $(this).data('id') }
  })
  .done(function (data) {
    // TODO: update roster & table
  });

将html表转换为可选择的表单

2 个答案: