Question

在决定如何构建视图代码时，我试图获得有关最佳实践的建议。在我当前的项目中，我有一个清晰/干净的模型映射到视图，但所有这些都显示在一个带有全局导航元素的非常标准的容器中。为了这个问题，用这种方式描绘：

标题
- 突片
卡
- card 1
- card 2
- card 3

您点击标题标签，卡片会滑入。卡片本身有一个后退按钮，可将其滑出以显示之前显示的卡片。卡的实际内容由另一个可能映射到模型的视图生成。我猜这与iOS或Android中的常见界面模式没有多大区别。

无论如何，我希望有一个名为“Card”的视图类，其中包含一个带有卡片导航的模板，以及每张卡片中的其他内容。然后我想以某种方式将卡的内容传递给它。

我可以创建一个Card类，然后扩展它以创建子类（即：子视图）吗？所以，假设我有一个名为UserModel的模型和一个名为UserView的视图来处理该模型的表单，我想做类似的事情：

var Card = Backbone.View.extend();
var UserView = Card.extend();

然后当渲染产生结果时，请说：

<!-- code from Card -->
<div class="card">
    <nav></nav>

    <!-- code from UserView -->
    <div class="user">
        ...
    </div>
    <!-- END code from UserView -->


</div>
<!-- code from Card -->

我意识到快速做到这一点的方法就是从我需要包装的每个视图中手动抓取卡模板等等......但这感觉不对。

这有意义吗？

哦......请记住，我希望这样做的部分优势在于我可以与UserView实例进行交互，并让它们在父类中触发必要的方法。所以......

var uv = new UserView();
uv.render() // <- should render the user view with the card wrapped around it.

当然，我不想手动渲染卡片。

你将如何构建它？

谢谢！

Answer 1

既然你专门询问了最佳实践，并且看起来你已经开始进入骨干网，那么我们首先要介绍一些基础知识。

Backbone具有使用模板引擎定义的视图。默认的模板引擎是underscore.js，但是更好的模板引擎是mustache.js或更好，但它是更高级别的包装器handlebar.js（HandleBarJS Website）。这样您就可以将您的视图和子视图完全按照下面描述的方式构建到一个模板中，该模板带有用逻辑填充的标记，从而使您只能进行一次大型渲染事件。

现在您已经有一个很好的模板可以将模型注入到您仍然希望使渲染事件运行良好，所以让我们确保您预先编译模板。有充分理由理解为什么这是必要的，请阅读本文（Performance benefit of Precompiling templates）。 Handlebar.js有一个预编译模板的方法，所以我不会在这里给出样本。

现在最后一步是建立你的模型。如果您以JSON格式构建它，您只需使用模型“执行”您的模板。

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

我使用Handlebar用于说明目的，因为模板创建更容易恕我直言，但实际上任何东西都适用于此模型。

希望能让你走上正确的道路。

在Backbone中查看包装器或子视图 - 最佳实践或建议

1 个答案: