Backbone：设计HTML设计器应用程序

Question

我有一个个人项目，我想创建一个简单的编辑器来管理HTML页面，没有什么花哨的，但想法是创建类似Windows窗体编辑器的东西，你可以点击按钮并向页面添加元素，然后更改设置等。它并不需要拖放，只需要在彼此内部添加元素。

UI看起来像这样

   v--- elements panel
 _______________________________________
| ELEMENTS |                            |
|          |     ___________________    | <- canvas
|   div    |    |                   |   |
|   img    |    |    IM A DIV       |   |
|    h1    |    |                   |   |
|----------|    |___________________|   |
| PROPS    |                            |
|          |                            |
| width:   |                            |
| height:  |                            |
|          |                            |
|          |                            |
|          |                            |
|__________|____________________________|
  ^--- properties panel

因此，当您点击＆＃39; div＆＃39;时，它会向画布添加div。画布只能选择一个元素，当然，属性面板反映了当前所选元素的属性，更新时它们反映了画布中的变化。

如果您点击“img＆＃39;选择div时，它会将它插入到div中，如果不是，则只插入根画布。

我遇到的问题是我真的不知道如何使用Backbone设计应用程序。

到目前为止我看到它......

集合

到目前为止，我认为对于画布视图

，我只能使用一个元素集合

浏览

有三个视图，元素面板，属性面板和画布，后者是最复杂的。

模型

这里是我感到困惑的地方，如果我没有弄错，模型基本上是我的应用程序中的实体，在这种情况下，不同类型的html元素（div，img，h1等）。画布视图包含元素集合模型。

当视图反映模型的状态时，画布视图应该绘制集合中的所有元素，因为每个模型都是不同的类型，它应该相应地绘制它们（div应该以不同于img的方式呈现）。 / p>

现在，视图如何呈现元素？每个模型是否存储数据应该如何显示，或视图是否只知道如何呈现每个元素类型？

Answer 1

Backbone Views就是你对它们的看法。从the docs＆＃34; Backbone视图几乎比代码更常见 - 它们不会为您确定HTML或CSS的任何内容，并且可以与任何JavaScript模板库一起使用。＆＃34 ;。

您可能需要查看Marionette Collection View。它支持集合中每个模型的dynamically deciding which view to use。

这里是an example jsfiddle，显示了一个集合视图，根据模型的数据呈现每个模型的不同项目视图。模型仅保存与其元素类型相关的数据。集合视图负责决定使用哪个项目视图。

相关的代码位在这里：

var CollectionView = Marionette.CollectionView.extend({

    // Determine the default view for each item.
    itemView: BlockItemView,

    // Dynamically change the item view for each model as needed
    buildItemView: function(item, ItemViewType, itemViewOptions){
        // build the final list of options for the item view type
        var options = _.extend({
            model: item,
            tagName: item.get('tagName')
        }, itemViewOptions);

        var view;

        // Change the item's view based on the options...
        if(item.get('display') === 'inline') {
            view = new InlineItemView(options);
        }
        else {
            // defaults to BlockItemView
            view = new ItemViewType(options);
        }

        return view;
    }
});