0

在决定如何构建视图代码时，我试图获得有关最佳实践的建议，而不只是一个具体的答案。在我当前的项目中，我有一个清晰/干净的模型到视图的映射，但所有这些都呈现在一个带有全局导航元素的非常标准的容器中。为了这个问题，请这样描绘：

  • 标题
    • 标签
  • 牌
    • 卡 1
    • 卡 2
    • 卡 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.

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

你会如何构建它？

谢谢！

4

1 回答 1

0

由于您专门询问了最佳实践，并且您似乎开始进入骨干网，所以我们首先从一些基础知识开始。

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

现在你已经有了一个很好的模板来注入你的模型，你仍然想让这个渲染事件执行得很好，所以让我们确保你预编译了你的模板。为了充分理解为什么这是必要的，请阅读这篇文章（预编译模板的性能优势）。Handlebar.js 有一个预编译模板的方法，所以我不会在这里给出示例。

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

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

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

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

于 2012-05-10T19:13:57.260 回答