Question

我有一个具有多个类似复杂属性的对象。我想写一个可用于每个属性的通用模板，但我不确定如何继续。我的对象看起来类似于下面的json表示。如果约会/天是一个集合，那么我可以正常迭代绑定模板的集合。但是，我需要将每个'day'建模为属性 - 例如，总会有5个条目。

但是，我想问题是你是否可以每天重复使用相同的模板。实际上，使用反射迭代每个属性？

{
  "days" : {
    "monday" : {
      "salesman" : "john",
      "customer" : "fred"
    },
    "friday" : {
      "salesman" : "paul",
      "customer" : "keith"
    },
    "tuesday" : {
      "salesman" : "dave",
      "customer" : "graham"
    },
    "wednesday" : {
      "salesman" : "james",
      "customer" : "keith"
    },
    "thursday" : {
      "salesman" : "keith",
      "customer" : "donald"
    }
  }
}

Answer 1

如果您可以将格式更改为更容易的格式，因为您可以在几天内使用迭代器，并使用已知密钥进行插值。

{ days: [{"weekday":"monday", "salesman":"john", "customer":"fred"}, ...]}

但是，使用现有格式，您可以在Handlebars.js中解决此问题（也应该在Mustache.js中工作，但我没有尝试过）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
</head>
<body>
<div id="output">
</div>
<script id="tmpl" type="x-template">
    <table>
    {{#key_value days}}
        <tr>
            <td><strong>{{key}}</strong></td>
            <td>{{value.salesman}}</td>
            <td>{{value.customer}}</td>
        </tr>
    {{/key_value}}
    </table>
</script>
<script type="text/javascript">
    var data = {
        "days":{
            "monday":{
                "salesman":"john",
                "customer":"fred"
            },
            "friday":{
                "salesman":"paul",
                "customer":"keith"
            },
            "tuesday":{
                "salesman":"dave",
                "customer":"graham"
            },
            "wednesday":{
                "salesman":"james",
                "customer":"keith"
            },
            "thursday":{
                "salesman":"keith",
                "customer":"donald"
            }
        }
    };

    Handlebars.registerHelper("key_value", function (obj, fn) {
        var soFar = "";
        var key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                soFar += fn({key:key, value:obj[key]});
            }
        }
        return soFar;
    });

    var templateSrc = $("#tmpl").html();
    var template = Handlebars.compile(templateSrc);
    var result = template(data);

    $("#output").html(result);
</script>
</body>
</html>

Answer 2

是的，你可以这样做。你可以让日子成为日间模型的集合。每天模型的属性可以是约会模型的约会集合。当您遍历这些天的集合时，您将获得当天的约会集合。在每一天都要重复约会。

因此，在这种情况下，您将拥有日模型的模板和约会模型的模板。当您遍历每个集合时，您将创建一个新的Backbone.View并传入当前模型。

Backbone.js用于多个类似对象属性的通用模板。

2 个答案: