Question

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

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

我有这个模板'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;
    }
  });
});

我无法弄清楚变量如何在模板或模板中呈现正在编译？

Answer 1

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

您的新视图extendsToolkitView，并从该视图继承方法。可能有render方法采用任何模板视图，该模板视图使用分配给视图的任何模型的数据呈现模板（在这种情况下，您通过{MUItem模板加载define模板{1}}声明）。使用ToolKitView作为“基础”，您可以在视图中共享常用方法，并根据需要进行调整或扩展。

回复您对showActiveMu的评论：当您创建此视图的新实例并为其指定模型时，该视图可以通过this.model访问该模型。在您的情况下，视图的showActiveMU方法将触发事件，从模型中获取“代码”属性，并将其作为参数传递给侦听该事件的任何函数。有关骨干事件的更多信息here。

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
});

跟踪模板中的变量 - 主干

1 个答案: