view() returns 空视图
view() returns empty view
我已经包含了 http://www.jsviews.com/download/jsviews.js 中的 jsview.js(包括 JsRender、JsObservable 和 JsViews)。我也有 html table 渲染行。
我需要执行 3 个案例:
- 删除旧行并将新呈现的行插入 table,在插入之前对它们进行一些操作(初始化等)
- 不删除行。只需在某行之后插入新的渲染行,在插入之前对它们进行一些操作(初始化等)
- 事件“
onclick
”我需要获取行数据:var rowData = $row.view().data;
当我使用渲染时:var $rows = $(compiledTmpl.render(dataArray, helperObj));
我可以对渲染的行做任何事情。我可以初始化它们并在某行之后插入它们。 但 当事件 "onclick" 引发时,我得到 空 数据 (rowData
)。为什么?
当我使用 link 时:compiledTmpl.link($table, dataArray, helperObj)
我无法 获取渲染行。为什么? 我无法 初始化它们并将它们插入某行之后。 但是 当事件 "onclick" 引发时,我得到 非空 数据 (rowData
).
我的情况如何?
更新:https://jsfiddle.net/chdcfsnv/4/
更新 2:不久(简单地说),我想渲染新行。在现有行之后添加它们。稍后我需要能够获得 linked 行数据。到目前为止我不需要的其他功能。
JsRender render() 方法将简单地根据数据和 return 字符串(通常是要插入到 DOM 中的 HTML 标记呈现模板)。然后您负责将生成的标记插入 DOM。当然,您可以在插入之前用代码修改标记。但是 JsRender 不知道 HTML DOM,并且不进行数据绑定 。如果您单击该元素,该元素将不知道它在 JsRender 中从中呈现的数据。 (为此,您需要设计自己的数据绑定,例如,在将数据添加到 DOM 之前将数据 ID 插入标记中)。
但是 JsViews 确实 进行数据绑定。为了让它工作,您必须使用 link() 方法,以便 JsViews 将呈现的模板连同它创建的数据绑定信息一起插入到 DOM 中。然后你可以使用 $(elem).view().data
返回数据,或者你可以对数据进行可观察的更改,并让 JsViews 根据你的声明数据动态地对 HTML 进行数据驱动的更改-linked 模板。
但你不能两全其美。如果您想在标记插入 DOM 之前使用代码修改标记,那么您必须使用 render() 方法,并自己插入 DOM,但是您不会有任何自动数据绑定和 $(element).view() 将不允许您神奇地返回数据。
另一方面,如果你想要 JsViews 数据绑定,并且想要使用 view() 来获取数据,那么你必须使用 declarative 根据数据定义您的 HTML 方法。您不能使用代码修改 HTML 字符串并期望数据绑定继续工作。此处的示例展示了如何将 JsViews 用于与您尝试在 jsfiddle 中构建的案例类似的案例:http://www.jsviews.com/#jsvplaying
补充评论
在下面的评论中回答您的问题。
jQuery 模板等同于 JsRender 渲染方法,因为它们都允许您在现有元素之后插入。但它们都不提供数据绑定或 view().data
返回数据的功能。
JsViews link 方法确实允许您在现有元素之后插入 - 但您需要将容器元素(例如 <tbody>
)或占位符元素放在那里,作为 link() 插入。参见 http://borismoore.github.io/jsviews/demos/step-by-step/01_rendering-and-linking.html。
如果您需要获取插入的 html 元素,在发生可观察到的变化后,您有几个选择:
- 在元素中插入ids,或者使用索引,简单地使用一个jQuery选择器。
- 监听JsViews的onAfterChange视图事件
- 监听 JsViews "jsv-domchange" HTML DOM 事件
我在这里创建了一个 jsfiddle,它显示了所有三个:http://jsfiddle.net/BorisMoore/eonp89gj/
我已经包含了 http://www.jsviews.com/download/jsviews.js 中的 jsview.js(包括 JsRender、JsObservable 和 JsViews)。我也有 html table 渲染行。
我需要执行 3 个案例:
- 删除旧行并将新呈现的行插入 table,在插入之前对它们进行一些操作(初始化等)
- 不删除行。只需在某行之后插入新的渲染行,在插入之前对它们进行一些操作(初始化等)
- 事件“
onclick
”我需要获取行数据:var rowData = $row.view().data;
当我使用渲染时:var $rows = $(compiledTmpl.render(dataArray, helperObj));
我可以对渲染的行做任何事情。我可以初始化它们并在某行之后插入它们。 但 当事件 "onclick" 引发时,我得到 空 数据 (rowData
)。为什么?
当我使用 link 时:compiledTmpl.link($table, dataArray, helperObj)
我无法 获取渲染行。为什么? 我无法 初始化它们并将它们插入某行之后。 但是 当事件 "onclick" 引发时,我得到 非空 数据 (rowData
).
我的情况如何?
更新:https://jsfiddle.net/chdcfsnv/4/
更新 2:不久(简单地说),我想渲染新行。在现有行之后添加它们。稍后我需要能够获得 linked 行数据。到目前为止我不需要的其他功能。
JsRender render() 方法将简单地根据数据和 return 字符串(通常是要插入到 DOM 中的 HTML 标记呈现模板)。然后您负责将生成的标记插入 DOM。当然,您可以在插入之前用代码修改标记。但是 JsRender 不知道 HTML DOM,并且不进行数据绑定 。如果您单击该元素,该元素将不知道它在 JsRender 中从中呈现的数据。 (为此,您需要设计自己的数据绑定,例如,在将数据添加到 DOM 之前将数据 ID 插入标记中)。
但是 JsViews 确实 进行数据绑定。为了让它工作,您必须使用 link() 方法,以便 JsViews 将呈现的模板连同它创建的数据绑定信息一起插入到 DOM 中。然后你可以使用 $(elem).view().data
返回数据,或者你可以对数据进行可观察的更改,并让 JsViews 根据你的声明数据动态地对 HTML 进行数据驱动的更改-linked 模板。
但你不能两全其美。如果您想在标记插入 DOM 之前使用代码修改标记,那么您必须使用 render() 方法,并自己插入 DOM,但是您不会有任何自动数据绑定和 $(element).view() 将不允许您神奇地返回数据。
另一方面,如果你想要 JsViews 数据绑定,并且想要使用 view() 来获取数据,那么你必须使用 declarative 根据数据定义您的 HTML 方法。您不能使用代码修改 HTML 字符串并期望数据绑定继续工作。此处的示例展示了如何将 JsViews 用于与您尝试在 jsfiddle 中构建的案例类似的案例:http://www.jsviews.com/#jsvplaying
补充评论
在下面的评论中回答您的问题。
jQuery 模板等同于 JsRender 渲染方法,因为它们都允许您在现有元素之后插入。但它们都不提供数据绑定或 view().data
返回数据的功能。
JsViews link 方法确实允许您在现有元素之后插入 - 但您需要将容器元素(例如 <tbody>
)或占位符元素放在那里,作为 link() 插入。参见 http://borismoore.github.io/jsviews/demos/step-by-step/01_rendering-and-linking.html。
如果您需要获取插入的 html 元素,在发生可观察到的变化后,您有几个选择:
- 在元素中插入ids,或者使用索引,简单地使用一个jQuery选择器。
- 监听JsViews的onAfterChange视图事件
- 监听 JsViews "jsv-domchange" HTML DOM 事件
我在这里创建了一个 jsfiddle,它显示了所有三个:http://jsfiddle.net/BorisMoore/eonp89gj/