0

我已经包含了来自http://www.jsviews.com/download/jsviews.js的 jsview.js（包括 JsRender、JsObservable 和 JsViews）。我也有渲染行的 html 表。

我需要执行3个案例：

  1. 删除旧行并将新呈现的行插入到表中，在插入之前对它们进行了一些操作（初始化等）
  2. 不要删除行。只需在某行之后插入新的渲染行，在插入之前对它们进行一些操作（初始化等）
  3. 在事件“ onclick”上，我需要获取行数据：var rowData = $row.view().data;

当我使用渲染时：var $rows = $(compiledTmpl.render(dataArray, helperObj)); 我可以对渲染的行做任何事情。我可以初始化它们并在某行之后插入它们。但是当事件“onclick”引发时，我得到空数据（rowData）。为什么？

当我使用链接时：compiledTmpl.link($table, dataArray, helperObj) 我无法获得渲染行。为什么？我无法初始化它们并在某行之后插入它们。但是当事件“onclick”引发时，我得到的不是空数据（rowData）。

如何在我的情况下？

更新：https ://jsfiddle.net/chdcfsnv/4/

更新 2：很快（而且很简单），我想要渲染新行。在现有行之后添加它们。稍后我需要能够获取链接的行数据。到目前为止我不需要的其他功能。

4

1 回答 1

0

JsRender render() 方法将简单地根据数据渲染模板并返回一个字符串（通常是您要插入到 DOM 中的 HTML 标记）。然后，您负责将生成的标记插入 DOM。当然，您可以在插入之前使用代码修改标记。但是JsRender 不知道 HTML DOM，也不做数据绑定。如果您单击该元素，则该元素将不知道在 JsRender 中渲染它的数据。（为此，您需要设计自己的数据绑定，例如在标记添加到 DOM 之前将数据 ID 插入标记）。

但是 JsViews确实做数据绑定。要使其工作，您必须使用 link() 方法，以便 JsViews 将呈现的模板连同它创建的数据绑定信息一起插入到 DOM 中。然后您可以使用$(elem).view().data返回数据，或者您可以对数据进行可观察的更改，并让 JsViews 根据您的声明性数据链接模板动态地对 HTML 进行数据驱动的更改。

但你不能两全其美。如果要在标记插入 DOM 之前使用代码修改标记，则必须使用 render() 方法，并自己插入 DOM，但不会有任何自动数据绑定和 $(element)。 view() 不会让您神奇地返回数据。

另一方面，如果你想要 JsViews 数据绑定，并且想要使用 view() 来返回数据，那么你必须使用声明性的方法来基于数据定义你的 HTML。您不能使用代码修改 HTML 字符串并期望数据绑定继续工作。这里的示例展示了如何将 JsViews 用于与您尝试在 jsfiddle 中构建的案例类似的案例：http: //www.jsviews.com/#jsvplaying

附加评论

在下面的评论中回答您的问题。

jQuery Templates 等价于 JsRender 渲染方法，因为它们都允许您在现有元素之后插入。但它们都不提供数据绑定或view().data返回数据的功能。

JsViews 链接方法确实允许您在现有元素之后插入 - 但您需要将容器元素（例如 a <tbody>）或占位符元素放在那里，作为 link() 插入的目标。请参阅http://borismoore.github.io/jsviews/demos/step-by-step/01_rendering-and-linking.html。

如果您需要获取插入的 html 元素，在发生可观察到的更改后，您有几个选择：

  1. 在元素中插入 id，或使用索引，只需使用 jQuery 选择器。
  2. 监听 JsViews onAfterChange 视图事件
  3. 监听 JsViews "jsv-domchange" HTML DOM 事件

我在这里创建了一个 jsfiddle，它显示了所有三个：http: //jsfiddle.net/BorisMoore/eonp89gj/

于 2015-07-17T22:17:55.193 回答