跟踪模板主干中的变量

Trace variables in template - backbone

本文关键字：变量 跟踪      更新时间：2023-09-26

为这样一个新手问题道歉，但我真的被困在这里了。

我正在研究某人的代码，并试图理解它。

我有这个模板"temp.tmpl"：

<li class="icon mu status-{{state}} type-{{type}}" style="background-color:{{colour}};">
    <a href="#">
        <span class="top-stat"><span>{{topStatNumber}}</span><span>{{topStatModifier}}</span></span>
        <span class="display-text">{{#if promotionName}}{{promotionName}}{{else}}{{name}}{{/if}}</span>
    </a>
</li>

和以下视图：

define([
  'views/toolkitView',
  'text!templates/components/temp.tmpl'
], function(ToolkitView, MUItem) {
  return ToolkitView.extend({
    template:MUItem,
    events: {
      "click a": "showActiveMU"
    },
    showActiveMU: function() {
      this.trigger("active:mu:selected", this.model.get("code"));
      return false;
    }
  });
});

我不知道变量是如何在模板中呈现的，也不知道是什么模板编译是反对的吗？

如果没有看到ToolkitView的内容，很难给出完整的答案，但我相信这就是正在发生的事情：

您的新视图扩展了ToolkitView，并继承了该视图中的方法。可能有一个render方法，它采用任何模板视图，该视图使用来自分配给视图的任何模型的数据来呈现模板（在本例中，它是通过define语句加载的MUItem模板）。使用ToolKitView作为"基础"允许您在视图中共享常用方法，并根据需要对其进行调整或扩展

针对您关于showActiveMu的评论：当您创建此视图的新实例并为其分配模型时，该视图可以通过this.model访问该模型。在您的情况下，视图的showActiveMU方法将触发一个事件，从模型中获取"code"属性，并将其作为参数传递给侦听该事件的任何函数。点击此处了解更多关于骨干活动的信息。

var Model = new FooModel();
var muItem = new MUView({model: fooModel});
// listen for event triggered by the view's showActiveMU event
muitem.on('active:mu:selected', function (code) {
  console.log(code); // the code from the model assigned to muItem view
});
相关文章：