view()返回空视图

时间:2015-07-14 18:48:09

标签: jquery-templates jsrender jsviews

我已经包含来自http://www.jsviews.com/download/jsviews.js的jsview.js(包括JsRender,JsObservable和JsViews)。我也有带渲染行的html表。

我需要执行3个案例:

  1. 删除旧行并将新呈现的行插入到表中,在插入之前对它们进行了一些操作(初始化等)
  2. 不删除行。只需在某行之后插入新的渲染行,在插入
  3. 之前对它们进行了一些操作(初始化等)
  4. 关于事件“onclick”我需要获取行数据:var rowData = $row.view().data;
  5. 当我使用渲染时:var $rows = $(compiledTmpl.render(dataArray, helperObj)); 我可以对渲染的行执行任何操作。我可以初始化它们并在一些行之后插入它们。 当事件“onclick”加注时,我获得数据(rowData)。为什么呢?

    当我使用链接时:compiledTmpl.link($table, dataArray, helperObj) 我无法获取渲染的行。为什么? 我无法初始化它们并在某些行之后插入它们。 当事件“onclick”加注时,我会非空数据(rowData)。

    如何处理我的案件?

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

    更新2 :很快(简单地说),我想要渲染新行。在现有行之后添加它们。后来我需要能够获得链接的行数据。到目前为止我不需要的其他功能。

1 个答案:

答案 0 :(得分:0)

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

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

但你不可能两种方式。如果要在将标记插入DOM之前使用代码来修改标记,则必须使用render()方法,并自己插入DOM,但不会有任何自动数据绑定和$(元素)。 view()不会让你神奇地回到数据。

另一方面,如果您想要JsViews数据绑定,并希望使用view()来返回数据,那么您必须使用 声明 根据数据定义HTML的方法。您无法使用代码修改HTML字符串,并希望数据绑定继续有效。这里的示例显示了如何将JsViews用于类似于您尝试在jsfiddle中构建的案例:http://www.jsviews.com/#jsvplaying

其他评论

在评论中回答您的问题。

jQuery模板等同于JsRender渲染方法,因为它们都允许您在现有元素之后插入。但它们都没有提供数据绑定或view().data功能来恢复数据。

JsViews链接方法允许您在现有元素之后插入 - 但您需要将容器元素(例如<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事件
  4. 我在这里创建了一个jsfiddle,它显示了所有三个:http://jsfiddle.net/BorisMoore/eonp89gj/