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

Backbone.js generic template for multiple similar object properties.

本文关键字：属性 对象 用于 js Backbone      更新时间：2023-09-26

我有一个具有多个类似复杂属性的对象。我想写一个通用模板，可以用于每个属性，但不确定如何进行。我的对象看起来类似于下面的json表示。如果约会/天数是一个集合，那么我可以正常地迭代绑定模板的集合。然而，我需要将每个"天"建模为一个属性——例如，总是有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"
    }
  }
}

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

{ 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>

是的，你可以做到。你可以把日模型集合起来。每天模型的一个属性可以是约会模型的约会集合。当您迭代天数集合时，您将获得当天的约会集合。在每一天中，对约会进行迭代。

因此，在这种情况下，您将有一个日期模型的模板和一个约会模型的模板。当你迭代每个集合时，你会创建一个新的主干。查看并传入当前模型。

相关文章：