backbonejs 视图的 initialize() 和 render() 的正确用法是什么?
What is the correct usage for backbonejs view's initialize() and render()?
我发现 backbonejs 的不同元素的用法非常模糊。据我所知,这是 backbone 不想成为一个框架的意图,但更多的是一组 tools/objects.
我了解 backbonejs 的大部分内容,但我仍然质疑视图的 initialize() 和 render() 调用的正确用法是什么。换句话说,每个里面应该有什么逻辑。
有人可以解释什么是最佳实践或什么被认为是在视图中正确使用这些调用吗?
这是一个相当广泛的问题,但我会试一试。这里的关键是这些调用没有“ 正确用法”这样的东西。 Backbone 特意灵活,旨在适应您的需求。这就是为什么它在一个更复杂但 "opinionated" 框架(告诉你它是 "my way or the highway")的世界中仍然占有一席之地的原因。
Backbone 在渲染方面不使用任何魔法。 render()
方法是空操作,甚至不会为您自动调用。它的存在无非是暗示事情通常是如何做的。
但是,initialize()
方法会在实例化视图时自动调用。 Backbone 保证此时视图的顶级 DOM 元素(el
)已经创建并准备好附加内容。
但同样,这是非常小的:顶级元素在那里,但尚未附加到 DOM(除非您将 options.el
传递给构造函数,设置 el
到现有元素)。将 el
插入 DOM 也是您的工作。
所以您可以自由决定如何连接。我通常做的是:
我的大部分视图都有一个模板,通常分配给视图的 template
属性。 (同样,这只是一个约定,没有任何魔法。您可以将其命名为 foo
。)该模板是在 initialize()
.
中编译的
在 initialize()
中,我设置了与视图应该表示的模型或集合的关系。即,视图观察 model/collection 事件,并在数据更改时调用 render
。 (你不必使用 Backbone 实体作为你的数据源,当然......可以是任何东西)。
在render()
中,数据被送入模板,结果成为el
的innerHTML。之后,我确保 el
已插入到 DOM 中(如果尚未插入)。
第一次调用 render()
应该在数据就绪时发生。正确的时机取决于应用程序。可能 render()
是 initialize()
中的最后一次调用,或者稍后会发生某些事件。
如果其中很多内容对您来说听起来像是重复的样板文件,是的,确实如此。像 Marionette 这样的框架存在于 Backbone 之上来处理这个问题。
但是该框架魔术会导致严重的性能损失。因此,当我必须生成大量视图时,我会坚持使用通用的 Backbone 内容(并使用我的 own components 之一来加快模板处理速度。)
我发现 backbonejs 的不同元素的用法非常模糊。据我所知,这是 backbone 不想成为一个框架的意图,但更多的是一组 tools/objects.
我了解 backbonejs 的大部分内容,但我仍然质疑视图的 initialize() 和 render() 调用的正确用法是什么。换句话说,每个里面应该有什么逻辑。
有人可以解释什么是最佳实践或什么被认为是在视图中正确使用这些调用吗?
这是一个相当广泛的问题,但我会试一试。这里的关键是这些调用没有“ 正确用法”这样的东西。 Backbone 特意灵活,旨在适应您的需求。这就是为什么它在一个更复杂但 "opinionated" 框架(告诉你它是 "my way or the highway")的世界中仍然占有一席之地的原因。
Backbone 在渲染方面不使用任何魔法。 render()
方法是空操作,甚至不会为您自动调用。它的存在无非是暗示事情通常是如何做的。
但是,initialize()
方法会在实例化视图时自动调用。 Backbone 保证此时视图的顶级 DOM 元素(el
)已经创建并准备好附加内容。
但同样,这是非常小的:顶级元素在那里,但尚未附加到 DOM(除非您将 options.el
传递给构造函数,设置 el
到现有元素)。将 el
插入 DOM 也是您的工作。
所以您可以自由决定如何连接。我通常做的是:
我的大部分视图都有一个模板,通常分配给视图的
template
属性。 (同样,这只是一个约定,没有任何魔法。您可以将其命名为foo
。)该模板是在initialize()
. 中编译的
在
initialize()
中,我设置了与视图应该表示的模型或集合的关系。即,视图观察 model/collection 事件,并在数据更改时调用render
。 (你不必使用 Backbone 实体作为你的数据源,当然......可以是任何东西)。在
render()
中,数据被送入模板,结果成为el
的innerHTML。之后,我确保el
已插入到 DOM 中(如果尚未插入)。第一次调用
render()
应该在数据就绪时发生。正确的时机取决于应用程序。可能render()
是initialize()
中的最后一次调用,或者稍后会发生某些事件。
如果其中很多内容对您来说听起来像是重复的样板文件,是的,确实如此。像 Marionette 这样的框架存在于 Backbone 之上来处理这个问题。
但是该框架魔术会导致严重的性能损失。因此,当我必须生成大量视图时,我会坚持使用通用的 Backbone 内容(并使用我的 own components 之一来加快模板处理速度。)